Question

我是Javascript的新用户，当您点击按钮或按Enter键时，我无法获取用户输入的值。这是我到目前为止所做的事情，它确实为李添加了东西，但它并没有接受这个价值。

我希望所有人都使用纯JS（而不是jQuery）。

这是我的HTML

  <h2>I'd like to bind here</h2>


  <input type="text" class="theplayer" name="Player" id="bind" value="Player-name" />
  <input type="button" id="thego" value="Go" /><br />

我的JS

const el = document.getElementById('bind');
const gobutton = document.getElementById('thego')
let nameOfPlayer = el.value;
gobutton[window.addEventListener ? 'addEventListener' : 'attachEvent']( window.addEventListener ? 'click' : 'onclick', myClickFunc, false);
function myClickFunc()
  {
    var x = document.createElement("LI");
    var t = document.createTextNode(nameOfPlayer);
    x.appendChild(t);
    document.getElementById("teammateys").appendChild(x);
  }

以下是演示https://jsfiddle.net/sthig/hhuw0rtr/

感谢您的帮助，并听取我的意见，正确地了解js verbiage！

Answer 1

这不是“绑定”的问题 - 在vanilla JS中没有这样的概念。

相反，您需要确保在调用onclick处理程序时抓取文本字段的值：

function myClickFunc()
  {
    var currentValue = document.getElementById("bind").value;
    var x = document.createElement("LI");
    var t = document.createTextNode(currentValue);
    x.appendChild(t);
    document.getElementById("teammateys").appendChild(x);
  }

您还可以将其缩小为：

function myClickFunc()
  {
    var x = document.createElement("li");
    x.textContent = document.getElementById("bind").value;
    document.getElementById("teammateys").appendChild(x);
  }

纯Javascript - 当按钮单击/回车键时，将文本输入的值添加到<li>

1 个答案: