Javascript 为什么我的HTML页面会重新绘制，替换我的输入？_Javascript_Html

Javascript 为什么我的HTML页面会重新绘制，替换我的输入？

javascript html

Javascript 为什么我的HTML页面会重新绘制，替换我的输入？,javascript,html,Javascript,Html,我正在努力学习一点Javascript。我编写了下面的代码，希望在单击按钮时看到写入页面的文本框的内容。这确实发生了，但非常短暂，因为页面似乎重新绘制回其原始值提前谢谢 <!DOCTYPE html> <html> <head> <script> function getData() { var x = document.getElementById("name").value; document.get

我正在努力学习一点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>


函数getData（）{
var x=document.getElementById（“名称”）.value；
document.getElementById（“空格”）.innerHTML=x；
}
使用Javascript和表单
姓名：

您的表单已提交。为了避免这种情况，请尝试在“getData”函数的末尾添加

return false

，并将

onClick=“getData（）”

更改为

onClick=“return getData（）”

演示：您的表单提交。为了避免这种情况，请尝试在“getData”函数的末尾添加

return false

，并将

onClick=“getData（）”

更改为

onClick=“return getData（）”

演示：

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

编辑：这将是最合适的：

之所以这样做，是因为表单正在完全提交，页面正在重新加载。要停止，请将onclick更改为：

onClick = "return getData()"

以及返回false的函数：

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

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

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

onClick = "return getData()"

以及返回false的函数：

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

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

感谢您的回复，非常有用。我还不能投票，但我的声誉已经到了谷底！谢谢你的回复，非常有帮助。我还不能投票，但我的声誉已经到了谷底！