Question

我想根据文本框的内容更新多个链接。

<script type="text/javascript">
var myvar = document.getElementById("textbox").value;
</script>

<input type="text" value="ghostbusters" id="textbox">
<a href="#" onclick="window.location.href = 'http://www.youtube.com/results?search_query=' + myvar">YouTube</a>
<a href="#" onclick="window.location.href = 'http://www.imdb.com/find?s=all&q=' + myvar">IMDb</a>

无论我做什么，似乎都将var设置为undefined :(

如果我设置var myvar ='some text';它工作正常，var被添加到url。如果我使用警告框调试它，它会显示文本框的内容。

我对Javascript有点新鲜，我做错了什么？

Answer 1

我对JS＆amp; amp; HTML，但我的猜测是你需要颠倒脚本块和输入的顺序。当脚本执行时，该元素尚不存在，因为它之后被声明。此外，当页面加载时，myvar将获取文本框中所有内容的值，可能不是您所追求的内容。

要动态生成URL，只在myvar中存储对输入的引用，并在连接期间使用myvar.value。

干杯，

的Marius

Answer 2

这是因为当分配myvar时，DOM还没有准备好，因此您需要将myvar的赋值包装在addEventListener中，否则它无法获取输入的值字段。

<script type="text/javascript">

    var myvar;

    document.addEventListener('DOMContentLoaded', function DOMContentLoaded() {
        myvar = document.getElementById("textbox").value;
    });

</script>

<input type="text" value="ghostbusters" id="textbox">
<a href="#" onclick="window.location.href = 'http://www.youtube.com/results?search_query=' + myvar">YouTube</a>
<a href="#" onclick="window.location.href = 'http://www.imdb.com/find?s=all&q=' + myvar">IMDb</a>

Answer 3

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function DOMContentLoaded() {
   var myele = document.getElementById("textbox");
});
</script>

<input type="text" value="ghostbusters" id="textbox">
<a href="#" onclick="window.location.href = 'http://www.youtube.com/results?search_query=' + myele.value">YouTube</a>
<a href="#" onclick="window.location.href = 'http://www.imdb.com/find?s=all&q=' + myele.value">IMDb</a>

document.getElementById（“textbox”）。value返回一个静态字符串。即使您更改#textbox元素的值，myvar的值也不会更改。

使用文本框更新链接

3 个答案: