时间戳

首页 > 解决方案 > 使用按钮检索用户输入

javascript - 使用按钮检索用户输入

问题描述

我正在尝试用 JS 编写我的第一个程序，但是我一直坚持从表单获取用户输入并在用户按下按钮（mot1 和 mot2）后显示它。我可能认为它来自输入区域，但我对 JS 完全陌生，我尝试了不同的脚本来存储输入而没有任何结果。

我尝试使用：

var mot1 = ('input1').val();

或者

document.getdocumentById('output1').value;

他们都没有返回写在 mot1 中的值，我什至不确定我应该如何解决这个问题，对我来说，我说应该读取和存储值 mot1，然后在“警报”中显示。

// bouton clickable
const button = document.querySelector("btn-lg");


//Récupère le mot n*2
var mot2 = ('Deuxième truc');
var index = i1;
// stock le résultat

function getmot() {
  //Récupère le mot n*1
  var mot1 = ('Premier truc').val();


}




function checker() {
  // Indique à l'utilisateur si les champs sont vides
  if (checkForMissingInput(false)) {
    alert('Fais un effort mon pote')
  } else {
    writeResult("output1")
  }

}


button onclick = function WriteResult() {
  // écrit le résultat
  alert(mot1);
}
<!doctype html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width = device-width, initial-scale = 1" />
  <title>Generateur</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
  <link rel="style" type="text/css" href="applistyle.css">
  <script src="scriptmot.js" />
</head>

<body>


  <div class="container">
    <div class="jumbotron">
      <h2> Générateur de mots stylés </h2>
      <form class="form-inline">
        <input type="text" class="form-control" maxlength="20" id="i0" placeholder="Premier truc" />
        <input type="text" class="form-control" maxlength="20" id="i1" placeholder="Deuxième truc" />
      </form>

      <br />
      <br />

      <button type="button" class="btn-lg" id="submit" onClick=>Bang!</button>

      <br />
      <br />

      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">Résultat :</span>

        </div>
        <textarea id="output1" rows="1" class="form-control" />
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous" />
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" />
</body>

</html>

提前致谢

标签： javascriptarraysbutton

解决方案

只需添加您的 scriptmot.js，如下所示：

function checker(){

    document.getElementById("output1").value = document.getElementById("i0").value + document.getElementById("i1").value;
    alert();
}

然后为您的 onclick 添加功能，如下所示：

<button type="button" class="btn-lg" id="submit" onClick=checker();>Bang!</button>

推荐阅读