时间戳

首页 > 解决方案 > JS函数后innerHTML属性没有改变

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

问题描述

我是 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>

标签： javascriptinnerhtml

解决方案

页面令人耳目一新！默认情况下，表单会刷新页面。您可以使用 on submit 函数的返回值来停止这种默认行为：只需返回 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>

推荐阅读