可以't通过DOM更改javascript中的段落文本

Can't change a paragraph text in javascript through DOM

本文关键字：javascript 段落 文本 更改 DOM 通过 可以      更新时间：2023-09-26

它会更改大约一秒钟，然后返回到上一个文本。"正在加载…"行必须更改为"嗨，请单击下一个文本框查看更多说明！"。

我试过最新的chrome和Edge浏览器。

function greetMe() {
    var yourName = document.getElementById("textbox").value;
    
    info1 = "hi,  Please click the next text box to see more instructions!"
    document.getElementById("textToChange").innerHTML = info1
}
#myForm {
    float: left;
    width: 30%
}
#myformInfo {
    
}
<!DOCTYPE html>
<html>
    <head> 
      
    </head>
    
    <body>
        <h1>HEllO ThERE!</h1>
         
        <div id="myForm"><form >
            <input id="textbox" placeholder="Your name">
            <button onclick="greetMe()">click!</button>
            <br><br>
            <input id=""> 
        </div></form>
        
        
        <div id="myFormSteps">
            <p id="textToChange">
                <script>var info1 = "Loading..."
                document.write(info1)
                </script>
            </p>
        
        </div>
         
         
    </body>
    
</html>

这可能是因为您没有为按钮设置type属性。按钮的默认类型是提交。尝试将属性type="button"添加到<按钮>。

当您单击按钮时，您的表单正在提交，页面正在重新加载——这就是它返回初始状态的原因。为了阻止这种情况的发生，将event作为函数的参数传递，然后在函数中使用该参数preventDefault():

HTML

<button onclick="greetMe(event);">click!</button>

JS-

function greetMe(e) {
  e.preventDefault();
  // ...
}

顺便说一句，最好删除内联JS，转而使用事件侦听器。

var button = document.querySelector('button');
button.addEventListener('click', greetMe, false);
相关文章：