读取输入和打印变量 - JavaScript和HTML 4.01
[英]Reading inputs and printing variables - JavaScript and HTML 4.01
问题描述
I've just been testing some code, and I can't get this to work: 
我刚刚测试了一些代码，我无法使用它：
<HTML>
<head>
<title> Page 1 </title>
<script>
function myFunction()
{
var x=document.getElementById("myEmail")
document.write(x)
}
</script>
</head>
<body>
<form>
<p> Input your email </p>
<input name="myEmail" type="text">
</form>
<button type="button" onclick="myFunction()">Submit Email</button>
</body>
</HTML>
All I'm trying to is have the user type something into a text, being read by the parser, putting it into a variable, then printing the variable on screen. 所有我想要的是让用户在文本中键入内容，由解析器读取，将其放入变量，然后在屏幕上打印变量。 It would help me a lot with other projects I've got on if I knew this. 如果我知道这件事，我会对其他项目有所帮助。 Can anyone help? 有人可以帮忙吗？ NOTE: I don't want to use HTML5 because it removes some of the tags that I like, so could we use HTML 4.01 or something? 注意：我不想使用HTML5，因为它删除了我喜欢的一些标签，所以我们可以使用HTML 4.01或其他东西吗？
4 个解决方案
解决方案1
2 已采纳 2013-11-05 03:13:25
Step 1 is to use HTML 5, indent your code, and use semicolons. 第1步是使用HTML 5，缩进代码，并使用分号。
<!DOCTYPE html>
<html>
<head>
<title> Page 1 </title>
<script>
function myFunction() {
var x = document.getElementById("myEmail");
document.write(x);
}
</script>
</head>
<body>
<form>
<p> Input your email </p>
<input name="myEmail" type="text">
</form>
<button type="button" onclick="myFunction()">Submit Email</button>
</body>
</html>
Step 2 is to look at what's being written, see that it's null , intuit when document.getElementById would return null , and realize that there is no element with an id of myEmail in your document. 第2步是查看正在编写的内容，看看它是null ，当document.getElementById返回null时myEmail ，并意识到document.getElementById中没有id为myEmail元素。 It just has a name . 它只是一个name 。 Drop the form while you're at it. 当你在它的时候放下表格。
<body>
<p>Input your email </p>
<input id="myEmail" type="text">
<button type="button" onclick="myFunction()">Submit Email</button>
</body>
The next step is to try that again and realize that x is an element, not a string, and you want to get its value. 下一步是再次尝试，并意识到x是一个元素，而不是一个字符串，你想要获得它的价值。
function myFunction() {
var x = document.getElementById("myEmail");
document.write(x.value);
} The “good future practice” steps are, in no particular order: “良好的未来实践”步骤没有特别的顺序：
- Put your script at the bottom and stop using inline event listeners 将脚本放在底部并停止使用内联事件侦听器
- Put your script in an external file 将您的脚本放在外部文件中
- Use a
<label>使用<label>
If you're not going to do something more useful than write the e-mail back, consider also using document.body.appendChild(document.createTextNode(…)) , which will not obliterate the rest of the document. 如果你不打算做一些比写电子邮件更有用的东西，也可以考虑使用document.body.appendChild(document.createTextNode(…)) ，它不会删除文档的其余部分。 The DOM is really great. DOM真的很棒。
解决方案2
0 2013-11-05 03:12:52
Add an id to the input 在输入中添加id
<input name="myEmail" type="text" id="myEmail">
then write the value 然后写下这个值
document.write(x.value)
解决方案3
0 2013-11-05 03:13:09
document.getElementById returns the DOM element. document.getElementById返回DOM元素。 Printing the DOM element is not meaningful and its output may vary by browser. 打印DOM元素没有意义，其输出可能因浏览器而异。
What you want is to print the input value of the input field, so check the value property: 你想要的是打印输入字段的输入值，所以检查value属性：
function myFunction()
{
var x=document.getElementById("myEmail").value
document.write(x)
}
Secondly, your HTML code does not have an ID attribute on the element, so the getElementById lookup will fail. 其次，您的HTML代码在元素上没有ID属性，因此getElementById查找将失败。 Add an ID: 添加ID：
<input name="myEmail" type="text" id="myEmail">
Regarding your note about HTML 4 vs. HTML 5. 关于HTML 4与HTML 5的说明。
NOTE: I don't want to use HTML5 because it removes some of the tags that I like, so could we use HTML 4.01 or something?
That comment is interesting. 这个评论很有意思。 Without knowing specifically which tags you are referring to, I cannot say why they are removed, but I imagine there is likely an equivalent. 如果不知道你指的是哪个标签，我不能说它们被删除的原因，但我想有可能是等价的。 HTML 5 does not remove any capabilities of HTML that I am aware of. HTML 5不会删除我所知道的任何HTML功能。
That is like saying you won't drive a car with an automatic transmission because it doesn't have a clutch. 这就像是说你不会驾驶带有自动变速器的汽车，因为它没有离合器。
解决方案4
0 2013-11-05 03:47:51
All you have to do is add an id attribute having the same value as the value of your name attribute of input type="text" and modify your script to store value instead of the element itself. 您所要做的就是添加一个id属性，其值与input type =“text”的name属性值相同，并修改脚本以存储值而不是元素本身。
<html>
<head>
<title> Page 1 </title>
<script>
function myFunction()
{
var x=document.getElementById("myEmail").value;
document.write(x);
}
</script>
</head>
<body>
<form>
<p> Input your email </p>
<input name="myEmail" id="myEmail" type="text">
</form>
<button type="button" onclick="myFunction()">Submit Email</button>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.