HTML 获取用户输入跨度

Question

我试图让用户输入到跨度中。 当我改变

var word = document.getElementById('span_key').innerHTML; --> var word = document.getElementById('input_search').value;

它工作正常，但我不能那样做，因为未来的其他事情将不起作用。 请不要让它重复，我现在正在寻找一天的。 谢谢！

        <div class="tag">
          <span id="span_key" value=""></span>
          <i class="material-icons">close</i>
        </div>
        <input id="input_search" value="" />
      </div>

      <button type="button" id="bt" onclick="clicked();">Click Me!</button>
      
      <script type="text/javascript">
      function clicked(){
        var word = document.getElementById('span_key').innerHTML;
        alert(word);
              window.open('https://api.dictionaryapi.dev/api/v2/entries/en/'+word);
        }
      </script>

Answer 1

value不是span标签的默认属性。

所以要获取value属性的value ，需要使用getAttribute函数。

 console.log(document.getElementById("span_key").getAttribute("value"));

 <span id="span_key" value="Test Value"></span>

Answer 2

您需要为keyup事件定义处理程序，以在按下enter键时获取input值。

在该处理程序上，您可以按如下方式将input值分配给span 。

 function clicked() { var word = document.getElementById('span_key').innerHTML; alert(word); //window.open('https://api.dictionaryapi.dev/api/v2/entries/en/' + word); } function inputKeyUp(event) { if (event.keyCode == 13) { // Enter is pressed document.getElementById("span_key").innerHTML = document.getElementById("input_search").value; } }

 <div class="tag"> <span id="span_key" value=""></span> <i class="material-icons">close</i> </div> <input id="input_search" value="" onkeyup="inputKeyUp(event)" /> <button type="button" id="bt" onclick="clicked();">Click Me!</button>