让我的 javascript 输出显示在我的 HTML 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20530872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting my javascript output to display in my HTML
提问by Ewan
I am sure this is a simple question.
我相信这是一个简单的问题。
To begin really playing with javascript and understand it I need to have the environment to see what my output is. I have done lessons in javascript but need to actually get the HTML and javascript talking.
要真正开始使用 javascript 并理解它，我需要有环境来查看我的输出是什么。我已经上过 javascript 课程，但需要真正了解 HTML 和 javascript。
What I am looking to do:
我想要做什么：
Have a user input information into an text box and have it show the result in the html.
让用户在文本框中输入信息并让它在 html 中显示结果。
is the sky blue? Yes (makes true be displayed on my HTML) is the sky blue? No (makes false be displayed in my HTML)
天是蓝色的吗？是的（使 true 显示在我的 HTML 上）是天蓝色的吗？否（使 false 显示在我的 HTML 中）
currently i have no idea if my javascript is doing anything!
目前我不知道我的 javascript 是否在做任何事情！
Here is my code:
这是我的代码：
HTML:
HTML：
<form action="" onsubmit="return checkscript()">
<input type="text" name="value">
<input type="submit" value="Submit">
Javascript:
Javascript：
function checkscript() {
for (i=0;i<4;i++) {
box = document.example.elements[i];
if (!box.value) {
alert('You haven\'t filled in ' + box.name + '!');
box.focus()
return false;
}
}
return true;
}
document.write(box);
I am so confused but need to see the results of what i am doing to see where to fix things, i tried using console in chromes inspect elements function but this has confused me more.
我很困惑，但需要查看我正在做的事情的结果以查看哪里可以解决问题，我尝试在 chromes 检查元素功能中使用控制台，但这让我更加困惑。
Can someone help and clean the code up to make sense by labelling everything as what they do?
有人可以通过将所有内容标记为他们所做的事情来帮助和清理代码以使其有意义吗？
box? check script?
盒子？检查脚本？
Thanks :)
谢谢 ：）
采纳答案by Scott Mermelstein
I updated the jsfiddleI had made for you. It's a working version that might get you started.
我更新了我为你制作的jsfiddle。这是一个可以帮助您入门的工作版本。
HTML
HTML
<!-- I avoided all the mess of forms, since that submits to a server, and that's more than you want right now. Note that I added ids to each input. Ids make it very easy to access the elements later. -->
<input type="text" name="value" id="fillIn">
<input type="button" value="Submit" id="button">
JS
JS
// My methodology here is totally different, since I directly get the element I care about
function checkscript() {
// find the element in the DOM
var box = document.getElementById("fillIn");
// check for a value
if (box.value) {
// if there is one, add a new div. That's probably not what you'll want in the long run, but it gives you something to work with (and seems to match your old idea of using document.write. I have never yet used document.write, though others with more experience than I may like the concept better.
// This creates a new element. If you press F12 and look at this in your debugger, you'll see it actually appear in the HTML once it's appended
var newElement = document.createElement("div");
// Set the value to what you want
newElement.innerHTML = box.value;
document.body.appendChild(newElement);
} else {
alert('You haven\'t filled in ' + box.name + '!');
box.focus()
// No returns necessary, since we're not dealing with formsubmittal.
}
}
// This hooks up the function we just wrote to the click event of the button.
document.getElementById("button").onclick = checkscript;
This may or may not be what you want, but it's at least a place to get started.
这可能是也可能不是您想要的，但它至少是一个开始的地方。
回答by Captain John
A few things to start out:
一些事情要开始：
1.) Make sure all elements have end tags
1.) 确保所有元素都有结束标签
<input type="text" name="value" />
Note backslash at end of tag.
注意标签末尾的反斜杠。
2.) You are using a form tag, which submits a form to a server side component.
2.) 您正在使用表单标签，它将表单提交给服务器端组件。
Suggest you need to use the onclick event. Which is available on all input controls. Suggest you start with buttons so:
建议您需要使用 onclick 事件。可用于所有输入控件。建议您从按钮开始，以便：
<input type="text" name="value" onclick="myFunction()" />
<script type="text/javascript">
function myFunction() {
document.write("Hello");
console.log("Hello");
}
</script>
Writes stuff directly to the html and console. Hope that gets you started.
将内容直接写入 html 和控制台。希望这能让你开始。
Regards,
问候，
Andy
安迪
