innerHTML 属性在 JS 函数之后没有改变

Question

我是 JS 新手，所以我有以下任务：页面上给出了一些文本，当用户想要通过在 [=25= 中添加此字符串来查找一组字符或字符串时]，然后点击"search"，每次遇到这个字符串在我们的文本中都应该标记为粗体。查看我的代码，我几乎可以确定该函数正在运行，但在函数完成后，粗体字符串会闪烁片刻，文本 returns 会恢复到初始状态。

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

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>

Answer 1

页面刷新！默认情况下，表单会刷新页面。您可以使用 on submit 函数的 return 值来停止此默认行为：只是 return false.

   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 false;
            }

        }

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

Answer 2

成功找到文本范围后返回 true 即可提交表单。您需要 return false 使表单使提交无效。这是更新后的代码，我已经将 return 语句从 if-else 块中更改出来，并且 returned 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;

    }

innerHTML 属性在 JS 函数之后没有改变

innerHTML property is not changing after JS function

javascript

innerhtml

innerHTML 属性 在 JS 函数之后没有改变

innerHTML property is not changing after JS function

javascript

innerhtml

innerHTML 属性在 JS 函数之后没有改变