使用getElementById更改html内容
使用getElementById更改html内容
提问于 2018-06-10 06:01:21
好的，我最近开始学习html/css和js。在多个教程中，我不知道如何正确使用getElementById函数。
<!DOCTYPE html>
<html>
<head>
<title>Practice</title>
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<h1 id="first">My Practice Page!</h1>
<form name="myForm" onsubmit="return validateForm()"
<label>Name:</label><br />
<input type="text" name="fname" />
<input type="submit" value="Submit" />
</form>
<script>
var nm = document.forms["myForm"]["fname"].value;
if (nm == "Don") {
document.write("Hi, Don");
return true;
}
else {
document.write("Hi, stranger.");
return false;
}
</script>
</body>
</html>submit按钮可以工作并注册fname等于输入文本，但它没有将该值赋给nm，或者我没有正确使用document.write。
有谁有什么想法吗？这看起来像是一件愚蠢的小事。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-10 06:08:56
首先，<form>元素的开始标记末尾没有>符号。
接下来，您的脚本在页面加载后立即运行，此时，用户还没有机会在字段中输入任何内容。
接下来，在这种情况下不应该使用document.write，因为它会覆盖现有的文档。相反，设置一个空元素，您将向该元素写入输出。
此外，由于您实际上没有在任何地方提交表单数据，因此不要使用submit按钮和submit事件。只需使用常规按钮及其click事件即可。
而且，不要使用内联HTML事件属性(onsubmit)。相反，可以在JavaScript中设置事件处理程序。
最后，您没有为任何元素提供id，因此不能使用.getElementById()查找任何元素。
<!DOCTYPE html>
<html>
<head>
<title>Practice</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1 id="first">My Practice Page!</h1>
<form name="myForm">
<label>Name:</label><br>
<input type="text" name="fname" id="fname">
<!-- Use a regular button since you aren't submitting form data anywhere -->
<input type="button" value="Submit">
</form>
<div id="output"></div>
<script>
// Set up a click event handler for the button
document.querySelector("[type='button']").addEventListener("click", validateForm);
// Get the reference to your text field. You can't get it by its id unless you've
// given it an id. name is not the same thing as id.
var fName = document.getElementById("fname");
// You didn't have your code inside of the callback function
function validateForm(){
if (fName.value == "Don") {
// Just populate a pre-existing element with the correct data.
output.textContent = "Hi, Don";
}
else {
output.textContent = "Hi, stranger.";
}
}
</script>
</body>
</html>
Stack Overflow用户
发布于 2018-06-10 06:05:37
您忘记了声明函数validateform
<!DOCTYPE html>
<html>
<head>
<title>Practice</title>
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<h1 id="first">My Practice Page!</h1>
<form name="myForm" onsubmit="return validateForm()">
<label>Name:</label><br />
<input type="text" name="fname" />
<input type="submit" value="Submit" />
</form>
<script>
function validateForm(){
var nm = document.forms["myForm"]["fname"].value;
if (nm == "Don") {
document.write("Hi, Don");
return true;
}
else {
document.write("Hi, stranger.");
return false;
}
}
</script>
</body>
</html>Stack Overflow用户
发布于 2018-06-10 06:07:22
这是因为JS不会神奇地执行逻辑:您需要做的是监听表单提交事件(避免使用内联JS绑定)：
document.forms["myForm"].addEventListener('submit', function(e) {
// Prevents default form submission
e.preventDefault();
// Your logic here
});
document.forms["myForm"].addEventListener('submit', function(e) {
e.preventDefault();
var nm = document.forms["myForm"]["fname"].value;
if (nm.value === "Don") {
output.textContent = "Hi, Don";
} else {
output.textContent = "Hi, stranger.";
}
});<form name="myForm">
<label>Name:</label><br />
<input type="text" name="fname" />
<input type="submit" value="Submit" />
</form>
<p id="output"></p>
如果选择在if/else块中以编程方式提交表单，则只需直接调用document.forms["myForm"].submit()即可。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50778891
复制相关文章
相似问题