Question

我正在尝试学习一点Javascript。我编写了下面的代码，期望在单击按钮时看到写入页面的文本框的内容。这确实发生了但非常短暂，因为页面似乎重新绘制回原始值。

提前致谢。

<!DOCTYPE html>
<html>

<head>
<script>
    function getData() {
        var x = document.getElementById("name").value;
        document.getElementById("space").innerHTML = x;
    }
</script>

</head>

<body>
    <h1>Playing with Javascript and Forms</h1>

<form id="myForm">
    Name: <input type="input" id="name">
    <input type="submit" value="Submit" id="submit" onClick = "getData()">
</form>

<p id="space"></p>  

</body>
</html>

Answer 1

这样做是因为表单已完全提交并且页面重新加载。要停止它，请将onclick更改为：

onClick = "return getData()"

和你的函数返回false：

function getData() {
    var x = document.getElementById("name").value;
    document.getElementById("space").innerHTML = x;
    return false;
}

<强> jsFiddle example

这将阻止表单提交并允许您的代码运行。

Answer 2

您的表单提交。要避免它，请尝试在“getData”函数末尾添加return false并将onClick = "getData()"更改为onClick = "return getData()"

演示：http://jsfiddle.net/6gAkL/

Answer 3

你的javascript似乎运行正常。问题是在JS运行HTML之后将表单提交给POST目标（当前设置为None）。如果您不希望在单击该输入时发布表单，则可能应删除：type =“submit”

编辑：这将是最恰当的：＆LT; input type =“button”value =“Submit”id =“submit”onClick =“getData（）”＆gt;

为什么我的HTML页面会重新绘制，取代我的输入？

3 个答案: