Question

所以我有一个输入表单，需要在某一点上不可见。所以我使用CSS和Javascript来隐藏输入，直到它应该可见。我来自python背景，我想做的是：

name = input("")

我尝试做类似的事情，但它只是将可见性的变化分配给变量。我尝试过使用.value，但我无法正常使用。

我想知道你是否可以获得getContext（或者如果有类似的东西），它允许我分配用户的内容。或者我可以简单地将它附加到变量上，因为它可以正常工作。

To give additional context I need the form to get the value the user has inputted when they click submit on the canvas

＆＃13;

var gameOver = true;
if (gameOver){
  document.getElementById('name').style.visibility = 'visible'
  console.log(name)
}

＆＃13;

<html>
<body>
  <input id = "name" type="text" class="name"
          style="visibility: hidden;"></input>
</body>
</html>

＆＃13;

Answer 1

你可以通过简单地声明一个变量来说明var nameInput，然后将DOM节点分配给它：

var nameInput = document.getElementById('name');

请注意，不使用name，因为它是implementation-dependent reserved keyword in JavaScript。

要访问其样式对象，您只需使用nameInput.style...，例如nameInput.style.visibility = 'visible'如果您想要更新visibility属性。

如果要检索它的值，可以执行以下操作：

console.log(nameInput.value);

var gameOver = true;
if (gameOver) {
  var nameInput = document.getElementById('name');
  nameInput.style.visibility = 'visible';
  console.log('DOM node: ' + nameInput);
  console.log('Value: ' + nameInput.value);
}

<input id="name" type="text" class="name" style="visibility: hidden;" />

如果您想在用户输入时动态检索其值，则需要使用.addEventListener()阅读事件绑定。在用户与页面交互时动态更新变量的意义上，JS 不被反应。该政权是这样的：

用户触发某种事件。在这种情况下，您希望收听onInput，onChange，onBlur ...活动
在JS逻辑中，您必须侦听元素发出的此事件。这是通过将事件侦听器绑定到DOM节点来完成的。

var gameOver = true;
if (gameOver) {
  var nameInput = document.getElementById('name');
  nameInput.style.visibility = 'visible';
  console.log('DOM node: ' + nameInput);
  console.log('Value: ' + nameInput.value);
}

nameInput.addEventListener('input', function() {
  console.log('Updated value: ' + this.value);
});

<input id="name" type="text" class="name" style="visibility: hidden;" />

Answer 2

如果我正确理解了您的问题，那么您现在的问题就是获取输入值，因为您已经拥有了使其可见的代码。

所以你需要做的是在输入中添加一个处理程序，以便在你想要检索用户键入的值时执行一个函数，例如在更改时：

HTML：

<input id = "name" type="text" class="name"
      style="visibility: hidden;" onchange="inputChanged();"></input>

使用Javascript：

function inputChanged() {
  console.log(document.getElementById('name').value);
}

希望这有帮助！

你能获得文本值的上下文吗？

2 个答案: