Question

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

要开始真正玩javascript并理解它，我需要有环境来查看我的输出是什么。我已经完成了javascript课程，但需要实际上得到HTML和JavaScript的谈话。

我想做什么：

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

天蓝色？是（在我的HTML上显示为true）天蓝色？否（在我的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

要做的一些事情：

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和控制台。希望能让你开始。

此致

安迪

Answer 2

我更新了我为你做的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;

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

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

2 个答案:

HTML

JS