1

初学者问题，我目前正在学习 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>

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

4

4 回答 4

4

把这一行：

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

函数内部findColor：

function findColor(){
    var myColor = document.getElementById("textbox").value;
    switch(myColor){ //...
于 2013-08-14T12:32:35.527 回答
1

我同意大卫的回答。您正在使用表单，您需要通过将事件参数传递给函数来防止如下默认提交事件，如下面的代码所示。

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

如您所见，我 findColor(event)在 html 中传递这样的事件

和一个建议：

在这里阅读并在document.write 此处查看演示，作者非常巧妙地解释为

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

于 2013-08-14T12:37:37.607 回答
0

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

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

因此 myColor 接收文本框元素的初始值。当页面完全加载并且您在文本框中输入一个值时，myColor 分配已经完成。为确保在正确的时间完成分配，在单击提交后，也就是调用 findColor 函数时，您有上面提到的两个选项：将 assignemt 设置为 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>
于 2013-08-14T13:30:06.097 回答
0

Or to pass it to the function do this:

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

            }
        }
于 2013-08-14T12:33:52.443 回答