让我的 javascript 输出显示在我的 HTML 中

Question

我相信这是一个简单的问题。

要真正开始使用 javascript 并理解它，我需要有一个环境来查看我的输出是什么。我已经完成了 javascript 的课程，但需要真正让 HTML 和 javascript 说话。

我想做什么：

让用户在文本框中输入信息并在 html 中显示结果。

天空是蓝色的吗？是（使 true 显示在我的 HTML 上） 天空是蓝色的吗？否（使我的 HTML 中显示 false）

目前我不知道我的 javascript 是否在做任何事情！

这是我的代码：

HTML：

<form action="" onsubmit="return checkscript()">
<input type="text" name="value">
<input type="submit" value="Submit">

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);

我很困惑，但需要查看我正在做的事情的结果，看看在哪里解决问题，我尝试在 chromes 检查元素功能中使用控制台，但这让我更加困惑。

有人可以通过将所有内容标记为他们所做的事情来帮助并清理代码以使其有意义吗？

盒子？检查脚本？

谢谢:)

Answer 1

我更新了我为你制作的jsfiddle。这是一个可以帮助您入门的工作版本。

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

// 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;

这可能是也可能不是您想要的，但它至少是一个开始的地方。

Answer 2

一些事情要开始：

1.) 确保所有元素都有结束标签

<input type="text" name="value" />

注意标签末尾的反斜杠。

2.) 您正在使用表单标签，它将表单提交到服务器端组件。

建议你需要使用onclick事件。这适用于所有输入控件。建议您从按钮开始：

<input type="text" name="value" onclick="myFunction()" />

<script type="text/javascript">
function myFunction() {
   document.write("Hello");
   console.log("Hello");
}
</script>

直接将内容写入 html 和控制台。希望这能让你开始。

问候，

安迪