Question

您好我是Javascript的新手，在 DOM 中创建问题并添加新的。 （我希望使用原生javascript而不是jquery）。

当我点击＆＃34;计算＆＃34; 按钮时，我非常简短地看到屏幕上的文字闪光然后消失。没有添加到DOM中。

这是我的JS脚本：

function makeResponseBox() {
    document.getElementById("calculate").onclick = function()
    {
        var responseBox = document.createElement("DIV"); //create <div>
        var para = document.createElement("P");//create <p>
        var text = document.createTextNode("Text");//
        para.appendChild(text);//append text to para
        var newDiv = responseBox.appendChild(para);// append <p> to <div> and assign to variable
        document.body.appendChild(newDiv);//append as child to <body>
    }

}//close function (makeResponseBox)

window.onload=makeResponseBox;

这是我的HTML：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Add Element to DOM</title>
    <script src="calculate.js"></script>
</head>
<body id="main">
<h1>Add Element to DOM</h1>


<form id ="form">

    <fieldset>

        <input type="submit" value="Calculate" id="calculate" />


    </fieldset><!-- close fieldset -->

</form><!-- close form -->

</body>
</html>

Answer 1

这是因为提交了表单以便重新加载页面

您需要向听众添加一个参数，比如说function(e)并在听众的开头调用e.preventDefault()。

示例：

document.getElementById("calculate").onclick = function(e)
{
    e.preventDefault();
    var responseBox = document.createElement("DIV"); //create <div>
    var para = document.createElement("P");//create <p>
    var text = document.createTextNode("Text");//
    para.appendChild(text);//append text to para
    var newDiv = responseBox.appendChild(para);// append <p> to <div> and assign to variable
    document.body.appendChild(newDiv);//append as child to <body>
}

或者您也可以更改按钮的类型以删除提交功能

<input type="button" value="Calculate" id="calculate" />

但是你的<form>变得毫无用处，你可以删除它

Answer 2

将提交类型更改为按钮，以避免重新加载

 <input type="submit" value="Calculate" id="calculate" />

到

<input type="button" value="Calculate" id="calculate" />

如果你想从js

提交表单句柄

使用.createElement（）

2 个答案: