Question

初学者问题，我正在学习JS，我正在尝试编写一个从简单的html表单中输入文本的函数。我无法弄清楚如何将文本输入传递给函数。这就是我目前正在尝试的：

<html>
    <body>
        <script type = "text/javascript">
        <!--

        var myColor = document.getElementById("textbox").value;


        function findColor(){
        switch(myColor){
            case "Blue":
                document.write("just like the sky!");
            break

            case "Red":
                document.write("Just like wine!");
            break
            default:
                document.write("Suit yourself then...");

            }
        }

        //-->
        </script>

        <form>
        Colour <input type="text" name="inputform" id="textbox" value="">
        <input type="submit" value="Submit" onclick="findColor();">
        </form>
    </body>
</html>

谢谢，任何帮助表示赞赏。

Answer 1

把这一行：

 var myColor = document.getElementById("textbox").value;

在findColor函数内：

function findColor(){
    var myColor = document.getElementById("textbox").value;
    switch(myColor){ //...

Answer 2

我和大卫的回答一样。您正在使用表单，并且需要通过将事件参数设置为函数来阻止默认提交事件，如下面的代码所示。

function findColor(e){ // e is a event parameter passed
        e.preventDefault();
        var myColor = document.getElementById("textbox").value;
        switch(myColor){
            case "Blue":
                document.write("just like the sky!");
            break

            case "Red":
                document.write("Just like wine!");
            break
            default:
                document.write("Suit yourself then...");

            }
            return false;
}

和html，

<input type="submit" value="Submit" onclick="findColor(event);">

正如您所看到的，我在html

中传递了此findColor(event)之类的事件

并提出建议：

阅读document.write here并在此处查看demo，作者非常清楚地解释了这一点

使用document.write的本地DOM替代方案如 document.createElement更合适。 document.write已经这些年来被严重滥用并且有很多缺点包括如果它在页面加载后执行它可以实际上覆盖了我们所在的页面，而document.createElement 才不是。我们可以在这里看到这个实际的例子。它也不适用于XHTML，这是选择更多的另一个原因 DOM友好的方法，例如document.createElement是有利的。

Answer 3

或者将它传递给函数执行此操作：

<input type="submit" value="Submit" onclick="findColor('Blue');">

 function findColor(myColor){
        switch(myColor){
            case "Blue":
                document.write("just like the sky!");
            break

            case "Red":
                document.write("Just like wine!");
            break
            default:
                document.write("Suit yourself then...");

            }
        }

Answer 4

当浏览器读取你的html页面时，它会解释javascript部分，从而定义你的findColor函数并执行该行

var myColor = document.getElementById("textbox").value;

因此myColor接收文本框元素的初始值。在页面完全加载并且您在文本框中输入值时，myColor分配已完成。为了确保在正确的时间完成赋值，在单击提交之后，也就是在调用findColor函数时，您有上面提到的两个选项：将assignemt作为findColor函数中的第一个语句或使其成为参数findColor函数

此示例中存在第二个缺陷。表单的提交会触发重新加载HTML页面。因此，您永远不会看到findColor函数的结果。使用Javascript更好的方法是将功能绑定到按钮。请参阅下面的修订后的HTML。

我相信你已经看过w3school JavaScript教程http://www.w3schools.com/js/。看看http://www.netmagazine.com/tutorials/javascript-debugging-beginners。

<html>
    <body>
        <script type = "text/javascript">
        function findColor(myColor){
        output = document.getElementById('output'); 
        switch(myColor){
            case "Blue":
                output.innerHTML = "Just like the sky"; 
                break
            case "Red":
                output.innerHTML = "Just like the wine"; 
                break
            default:
                output.innerHTML ="Suit yourself then...";
            }
        }
        </script>

        <form>
        Colour <input type="text" name="inputform" id="textbox" value="">
        </form> 

        <button type="button" onclick="findColor(document.getElementById('textbox').value);"> FindColor </button>
        </form>

        <div id="output"> what I think of this color </div>
    </body>
</html>

从HTML输入文本表单值到Javascript函数

4 个答案: