个人中心
gpt4 book ai didi

javascript - JS函数后innerHTML属性没有改变

转载 作者：行者123 更新时间：2023-12-04 10:53:12 25 4
gpt4 key购买 nike

我是 JS 新手，所以我有以下任务:在页面上给出一些文本，当用户想要通过在窗口中添加此字符串然后单击“搜索”来查找一组字符或字符串时，这每次遇到字符串时，都应在我们的文本中将其标记为粗体。
查看我的代码，我几乎可以确定该函数正在运行，但在该函数完成后，粗体字符串会闪烁片刻，文本返回其初始状态。

请帮我找出我的错误。
这是代码。

function look(a) {
  var str = document.getElementById("original").innerHTML;
  var len = a.text.value.length;
  var begin = str.indexOf(a.text.value);
  var final = str;

  if (begin == -1) {
    alert("No matches");
    return false;
  }
  if (begin > -1) {
    var count = 0;
    final = str.substring(count, begin) + "<b>" + a.text.value + "</b>" + str.substring(begin + len + 1, str.length);
    while (begin != -1) {
      begin = str.indexOf(a.text.value, begin + len);
      if (begin == -1) break;
      final = final.substring(count, begin) + "<b>" + a.text.value + "</b>" + str.substring(begin + len + 1, str.length);
    }

    document.getElementById("original").innerHTML = final;

    return true;
  }

}
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <span id="original" type="text">Some given text</span>
  <br/>
  <form name="search" onsubmit="return look(this)">
    <p>Enter text to search<input type="text" name="text"></p>
    <p><input type="submit" value="search"></p>
  </form>
</body>

最佳答案

返回 true成功找到文本跨度后，将提交表单。您需要返回 false使表单使提交无效。这是更新后的代码，我把返回语句改成了if-else阻止并返回 false无论哪种方式。另一种方法是将提交按钮设为 input[type='button']并注册 onclick它的事件监听器。

    function look(a)
    {
        var str=document.getElementById("original").innerHTML;
        var len=a.text.value.length;
        var begin=str.indexOf(a.text.value);
        var final=str;

        if (begin==-1){
            alert("No matches"); 
        }
        if (begin>-1){
            var count=0;
            final=str.substring(count,begin)+"<b>"+a.text.value+"</b>"+str.substring(begin+len+1, str.length);
            while(begin!=-1){ 
                begin=str.indexOf(a.text.value,begin+len);
                if(begin==-1) break;
                final=final.substring(count, begin)+"<b>"+a.text.value+"</b>"+str.substring(begin+len+1, str.length);
           } 

            document.getElementById("original").innerHTML=final;


        }

        return false;

    }

关于javascript - JS函数后innerHTML属性没有改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59367871/

25 4 0
文章推荐： wix - 如何检测net core 3.1 windows desktop app runtime是否安装
文章推荐： python - Pyinstaller 生成的文件不起作用
文章推荐： java - 如何创建仅在 6 天后过期的 s3 下载链接
文章推荐： 从另一个屏幕移回屏幕后 flutter 调用函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com