全局变量返回未定义答案

【问题标题】：global variables are returning as undefined全局变量返回未定义
【发布时间】：2016-05-13 13:53:06
【问题描述】：

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

<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>

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

-编辑-

我将整个脚本移到正文中，这似乎解决了问题。

【问题讨论】：

如果您不想动态获取输入字段的值，那么将脚本移动到正文将起作用......否则它不会
你在做三明治之前就已经吃完了。您试图在呈现之前引用一个元素。

标签： javascript html global-variables alert var

【解决方案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>

【讨论】：

@Cain 我认为这不会解决问题，因为您不会从输入字段中获取更新的值...变量sourceTest 将始终具有@ 的初始值987654329@字段
我试图解决的问题是一种无需将变量放入函数即可发出警报的方法。

【解决方案2】：

你可以编写一个它正在工作的脚本

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

【讨论】：