全局变量返回未定义状态

Question

我编写了一个简单的页面，该页面可以提醒您文本框中的内容。

<html>
    <head>
        <script language="javascript">
            var sourceTest = "songs/" + document.getElementById("inputSong").value + ".mp3";

            function jukeBox()
            {
                alert(sourceTest);
            }
        </script>
    </head>
    <body>
        <input type="text"; id="inputSong" style="display: inline; float: left";></input>
        <button 
            id="butter";
            type="button"; 
            onclick="jukeBox()"; 
            style="display: inline; margin-left: 5px; float: left"> 
                Play 
        </button>
    </body>
</html>

问题是，除非我这样做，否则警报将返回未定义的状态。

<html>
    <head>
        <script language="javascript">
            function jukeBox()
            {
                var sourceTest = "songs/" + document.getElementById("inputSong").value + ".mp3";
                alert(sourceTest);
            }
        </script>
    </head>
    <body>
        <input type="text"; id="inputSong" style="display: inline; float: left";></input>
        <button 
            id="butter";
            type="button"; 
            onclick="jukeBox()"; 
            style="display: inline; margin-left: 5px; float: left"> 
                Play 
        </button>
    </body>
</html>

我正在尝试使用全局变量而不是局部变量来使其工作。

-编辑-

我将整个脚本移至正文，这似乎已解决了该问题。

Answer 1

问题出在第一个示例中var sourceTest = "songs/" + document.getElementById("inputSong").value + ".mp3"; 仅在加载页面时评估一次，因为脚本位于标头中，因此在创建dom元素之前执行了脚本，因此document.getElementById("inputSong")将返回null并导致错误（在浏览器控制台中为Uncaught TypeError: Cannot read property 'value' of null ），因此变量的值变得不确定。

由于您要获取输入字段的值，因此在这种情况下可以真正使用全局变量。

如果仍要使用全局变量，则可以将字符串的静态部分存储在全局变量中，然后将其用于单击处理程序中的字符串连接，也可以使用正则表达式并替换单击处理程序中的模板部分

 var prefix = "songs/", suffix = ".mp3"; function jukeBox() { var sourceTest = prefix + document.getElementById("inputSong").value + suffix; alert(sourceTest); }

 <input type="text" ; id="inputSong" style="display: inline; float: left" ;/> <button id="butter" ; type="button" ; onclick="jukeBox()" ; style="display: inline; margin-left: 5px; float: left"> Play </button>

要么

 var sourceTest = "songs/{inputSong}.mp3"; function jukeBox() { var value = sourceTest.replace(/\\{inputSong\\}/, document.getElementById("inputSong").value) alert(value); }

 <input type="text" ; id="inputSong" style="display: inline; float: left" ;></input> <button id="butter" ; type="button" ; onclick="jukeBox()" ; style="display: inline; margin-left: 5px; float: left"> Play </button>

Answer 2

您可以编写一个有效的脚本

 function jukeBox(){ var input = "songs/" +document.getElementById("inputSong").value+ ".mp3"; alert(input); }

全局变量返回未定义状态

问题描述

2 个解决方案

解决方案1
1 2016-02-04 04:57:47

解决方案2
0 2016-02-04 05:32:37

全局变量返回未定义状态

问题描述

2 个解决方案

解决方案1 1 2016-02-04 04:57:47

解决方案2 0 2016-02-04 05:32:37

解决方案1
1 2016-02-04 04:57:47

解决方案2
0 2016-02-04 05:32:37