getInputs

getInputs

关注
发信
关注(28)粉丝(399)

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

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



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/[email protected]/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>

最佳答案

加载脚本时，您将获得select和input的值。这意味着变量getInputs（在var getInputs = UI.getInputs();行上）是一个仅包含两个字符串的对象。这就是为什么select即使更改它也会始终打印相同内容的原因。

您应该改为在option: document.querySelector(DOMstrings.option)中返回Hello: document.querySelector(DOMstrings.Hello)和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/[email protected]/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);

10-08 12:39
Powered by LMLPHP ©2024 getInputs 0.025896