javascript - 为什么我的 HTML 页面会重新绘制,替换我的输入?

标签 javascript html

我正在尝试学习一点 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>

最佳答案

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

onClick = "return getData()"

和你返回 false 的函数:

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

jsFiddle example

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

关于javascript - 为什么我的 HTML 页面会重新绘制,替换我的输入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22024496/

相关文章:

javascript - 如何将物体从头到尾移动半圈?

javascript - Jquery 遍历输入字段的祖先

Javascript 循环 if 语句进行文本冒险

javascript - 检查 div 是否已经显示,并将其隐藏

javascript - 使用 angularjs 获取休息服务

javascript - Angular 一个独立的 CSS block

javascript - 更改链接可见性——使用鼠标悬停和 getElementsByClassName 的事件监听器

javascript - 更改 promise 返回的数据

javascript - this.state.elements.map 不是一个函数

javascript - 如何使用 CSS 或 Javascript 创建一个看起来无限的选取框