JS函数后innerHTML属性没有改变
[英]innerHTML property is not changing after JS function
问题描述
I'm a fresher in JS, so I have the following task: Some text is given on a page and when a user wants to find a set of characters or string by adding this string in a window and then clicking "search", this string should be marked as bold in our text each time it is met.
我是 JS 新手，所以我有以下任务：在页面上给出一些文本，当用户想要通过在窗口中添加此字符串然后单击“搜索”来查找一组字符或字符串时，这每次遇到字符串时，都应在我们的文本中将其标记为粗体。 Looking through my code I'm almost sure that the function is working, but after the function has finished, the bold strings just blink for a moment and the text returns to its initial status.查看我的代码，我几乎可以确定该函数正在运行，但是在该函数完成后，粗体字符串会闪烁片刻，文本返回其初始状态。
Please help me to find out my mistake.请帮我找出我的错误。 Here's the code.这是代码。
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>
2 个解决方案
解决方案1
1 2019-12-17 05:15:35
The page is refreshing!页面很清爽！ By default, forms refresh the page.默认情况下，表单会刷新页面。 You can use the return value of the on submit function to stop this default behavior: just return false.您可以使用 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>
解决方案2
1 已采纳 2019-12-17 05:22:23
Returning true on successfully finding the text span makes the form to be submitted.成功找到文本跨度时返回true使表单被提交。 You need to return false to make the form invalidate the submission.您需要返回false以使表单使提交无效。 This is the updated code, I have changed the return statement out of the if-else block and returned false either way.这是更新后的代码，我已经更改了if-else块中的 return 语句并以任何一种方式返回false 。 Another way is to make submit button as input[type='button'] and register an onclick event listener to it.另一种方法是将提交按钮设为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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.