温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - I can get the select input value but unable to get the input value

javascript - 我可以获取选择输入值,但无法获取输入值

发布于 2020-03-27 15:42:19

我可以获取选择输入值,但是无法获取输入值,它在控制台中显示为空,

var model = (function() {})();
var UI = (function() {
  var DOMstrings = {
    'search': 'search',
    'english': '.english',
    'arabic': '.arabic',
    'option': '.option',
    'Hello': '.Hello'
  }
  return {
    getDOMstrings: function() {
      return DOMstrings;
    },
    getInputs: function() {
      return {
        option: document.querySelector(DOMstrings.option).value,
        Hello: document.querySelector(DOMstrings.Hello).value
      }
    }
  }
})();
var controller = (function(model, UI) {
  var DOM = UI.getDOMstrings();
  var getInputs = UI.getInputs();
  var events = function() {
    document.addEventListener('keypress', function(e) {
      if (e.code === "Enter") {
        console.log(getInputs.option);
        console.log(getInputs.Hello);
      }
    });
  }
  return {
    init: function() {
      events();
    }
  }
})(model, UI);
controller.init();
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />

  <title>TABLER</title>
</head>

<body>
  <div class="container">
    <br /><br />

    <div class="input-group flex-nowrap">
      <div class="input-group-prepend">
        <span class="input-group-text" id="addon-wrapping">Search</span>
      </div>
      <input type="text" class="form-control search" placeholder="Search" aria-label="Search" aria-describedby="addon-wrapping" name="search" />
    </div>
    <br />

    <div class="input-group flex-nowrap">
      <div class="input-group-prepend">
        <span class="input-group-text" id="addon-wrapping">ENGLISH</span>
      </div>
      <input type="text" class="form-control english" placeholder="ENGLISH" aria-label="ENGLISH" aria-describedby="addon-wrapping" name="english" />
    </div>
    <br />

    <div class="input-group flex-nowrap">
      <div class="input-group-prepend">
        <span class="input-group-text" id="addon-wrapping">ARABIC</span>
      </div>
      <input type="text" class="form-control arabic" placeholder="ARABIC" aria-label="ARABIC" aria-describedby="addon-wrapping" name="arabic" />
    </div>
    <br />
    <select name="option" id="option" class="option">
      <option value="word">word</option>
      <option value="term">term</option>
      <option value="sentence">sentence</option>
    </select>
    <input class="Hello" value="">

    <br />
    <br />

    <table class="table table-striped">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">English</th>
          <th scope="col">Arabic</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script src="main.js"></script>
</body>

</html>

查看更多

查看更多

提问者
cat
被浏览
16
nick zoum 2020-01-31 16:21

你所得到的值selectinput当脚本被加载。这意味着变量getInputs(在行上var getInputs = UI.getInputs();)是一个仅包含两个字符串的对象。这就是为什么select即使您更改总是打印相同内容的原因。

相反option: document.querySelector(DOMstrings.option)您应该返回Hello: document.querySelector(DOMstrings.Hello)in getInputs,然后在enter按下获取值console.log(getInputs.option.value);console.log(getInputs.Hello.value);

var model = (function() {})();
var UI = (function() {
  var DOMstrings = {
    'search': 'search',
    'english': '.english',
    'arabic': '.arabic',
    'option': '.option',
    'Hello': '.Hello'
  }
  return {
    getDOMstrings: function() {
      return DOMstrings;
    },
    getInputs: function() {
      return {
        option: document.querySelector(DOMstrings.option),
        Hello: document.querySelector(DOMstrings.Hello)
      }
    }
  }
})();
var controller = (function(model, UI) {
  var DOM = UI.getDOMstrings();
  var getInputs = UI.getInputs();
  var events = function() {
    document.addEventListener('keypress', function(e) {
      if (e.code === "Enter") {
        console.log(getInputs.option.value);
        console.log(getInputs.Hello.value);
      }
    });
  }
  return {
    init: function() {
      events();
    }
  }
})(model, UI);
controller.init();
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />

  <title>TABLER</title>
</head>

<body>
  <div class="container">
    <br /><br />

    <div class="input-group flex-nowrap">
      <div class="input-group-prepend">
        <span class="input-group-text" id="addon-wrapping">Search</span>
      </div>
      <input type="text" class="form-control search" placeholder="Search" aria-label="Search" aria-describedby="addon-wrapping" name="search" />
    </div>
    <br />

    <div class="input-group flex-nowrap">
      <div class="input-group-prepend">
        <span class="input-group-text" id="addon-wrapping">ENGLISH</span>
      </div>
      <input type="text" class="form-control english" placeholder="ENGLISH" aria-label="ENGLISH" aria-describedby="addon-wrapping" name="english" />
    </div>
    <br />

    <div class="input-group flex-nowrap">
      <div class="input-group-prepend">
        <span class="input-group-text" id="addon-wrapping">ARABIC</span>
      </div>
      <input type="text" class="form-control arabic" placeholder="ARABIC" aria-label="ARABIC" aria-describedby="addon-wrapping" name="arabic" />
    </div>
    <br />
    <select name="option" id="option" class="option">
      <option value="word">word</option>
      <option value="term">term</option>
      <option value="sentence">sentence</option>
    </select>
    <input class="Hello" value="">

    <br />
    <br />

    <table class="table table-striped">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">English</th>
          <th scope="col">Arabic</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script src="main.js"></script>
</body>

</html>

您提到您是JS的新手,所以我想澄清一下JS中的字符串是原始类型,并且是通过值而不是引用传递的(这意味着如果您复制字符串然后更改原始值,则副本不会受到影响) 。

var original = "123";
var other = original;

console.log(original);
console.log(other);
console.log(original === other);
original = "321";
console.log(original);
console.log(other);
console.log(original === other);

发布
问题

分享
好友

手机
浏览

扫码手机浏览