Question

您好，我今天刚刚开始，所以我很新。

我必须得到一个字符串，用户可以在网站上输入我的JavaScript文件。我发现我应该使用document.getElementById("myID").value来获取html网站上输入字段的值。这是我的问题：我不能在我的输入和按钮周围使用括号，因为提交将强制重新加载网站，我的功能不会有任何影响。

所以我必须动态地将字符串放入我的JavaScript文件中。

这就是我现在所拥有的一切：

<div id="searchDiv">
  <input type="text" id="searchInput" placeholder="Search for Gifs..." value="" />
  <input type="button" id="searchButton" value="Search"></button>
</div>

我的JavaScript文件：

var searchButton = document.getElementById("searchButton");
var searchInput = document.getElementById("searchInput").value;

searchButton.addEventListener("click",
  function() {
    function(parameter)
  }
)...

因此即使输入字段已被编辑，document.getElementById("searchInput").value;也会返回null。

我希望你能帮助我。

Answer 1

这是因为您甚至在单击按钮之前存储了searchInput值，因此无论您输入什么作为输入，该值都将为空

尝试访问按钮的点击事件

检查此代码段

var searchButton =document.getElementById("searchButton");
var searchInput=document.getElementById("searchInput");
window.onload=function(){
searchButton.addEventListener("click",
  function() {
   alert(searchInput.value);
  }
)
}

<div id="searchDiv">
  <input type="text" id="searchInput" placeholder="Search for Gifs..." value="" />
  <input type="button" id="searchButton" value="Search">

</div>

希望有所帮助

Answer 2

你应该使用

<button></button>

而不是

<input></button>

我做的是

<div id="searchDiv">
        <input type="text" id="searchInput" placeholder="Search for Gifs...">
        <button id="searchButton">Search</button>
    </div>

    <script type="text/javascript">
        document.getElementById("searchButton").onclick = function(){
            alert(document.getElementById("searchInput").value);
        }
    </script>

HTML / JavaScript - 输入值不更新（Element.value = Null）

2 个答案: