将HTML中的文本表单值输入到Javascript函数中

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)这样的findColor(event)

和一个建议：

阅读有关document.write ，并在此处查看演示，作者非常简洁地将其解释为

在更适合使用本机DOM替代文档（例如document.createElement）的地方使用document.write。 这些年来，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 个解决方案

解决方案1
4 已采纳 2013-08-14 12:32:35

解决方案2
1 2013-08-14 12:37:37

解决方案3
0 2013-08-14 12:33:52

解决方案4
0 2013-08-14 13:30:06

将HTML中的文本表单值输入到Javascript函数中

问题描述

4 个解决方案

解决方案1 4 已采纳 2013-08-14 12:32:35

解决方案2 1 2013-08-14 12:37:37

解决方案3 0 2013-08-14 12:33:52

解决方案4 0 2013-08-14 13:30:06

解决方案1
4 已采纳 2013-08-14 12:32:35

解决方案2
1 2013-08-14 12:37:37

解决方案3
0 2013-08-14 12:33:52

解决方案4
0 2013-08-14 13:30:06