Question

我正在尝试开发魔术八球应用程序作为我的第一个javascript和HTML项目之一。我需要一种表格，用户可以在其中输入问题，然后可以在屏幕上显示``用户询问：'问题'。如果您能帮助我，那就太好了，谢谢。如果我的问题不清楚，请指定您不确定的内容，我会尽力解释。

再次感谢，

奥斯卡。

我已经尝试使用函数和值来获取信息，并且在堆栈溢出上也有类似的问题，但是它们都没有起作用/成为我想要的东西。以下代码是我尝试过的。

// For the Javascript

function getUserName() {
  var nameField = document.getElementById('nameField').value;
  var result = document.getElementById('result');
}
document.write(result).value;

// For the HTML

<script src="script.js"></script>
<div class='wrapper'>
  <form id='nameForm'>
    <div class='form-uname'>
      <label id='nameLable' for='nameField'>Create a username:</label>
      <input id='nameField' type='text' maxlength='25'></input>
    </div>
    <div class='form-sub'>
      <button id='subButton' type='button'>Print your name!</button>
    </div>
  </form>

  <div>
    <p id='result'></p>
  </div>
</div>

Answer 1

这是一个解决方案。

我在表单中添加了一个事件监听器。提交表单后，我将从输入中获取值并将其用于结果。

<body>

<form id='nameForm'>
    <div class='form-uname'>
        <label id='nameLable' for='nameField'>Create a username:</label>
        <input id='nameField' type='text' maxlength='25'></input>
    </div>
    <div class='form-sub'>
        <button id='subButton' type='submit'>Print your name!</button>
    </div>
</form>

<div>
    <p id='result'></p></div>
</div>

</body>

<script>
    let form = document.getElementById("nameForm")
    form.addEventListener('submit', function(evt){
        evt.preventDefault();
        let username = document.getElementById("nameField").value
        document.getElementById('result').innerHTML = username
    })
</script>

如何使HTML表单输入更改Javascript变量

1 个答案: