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

Question

I'm a very new user of Javascript and I'm having trouble with getting the value of a user's input when you click the button or hit enter. Here is what I have so far, it does indeed add things to the li but it doesn't accept the value.

I'd like this to all be in pure JS (not jQuery).

Here is my 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 />

And my 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);
  }

Here is a demo https://jsfiddle.net/sthig/hhuw0rtr/

Thanks for you help and listening to me get my head around the js verbiage correctly!

Answer 1

This isn't really an issue with "binding"--there's no such concept in vanilla JS.

Instead you need to make sure that you're grabbing the value of the text field when the onclick handler is called:

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);
  }

You can also reduce this to:

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