我可以获取选择输入值,但是无法获取输入值,它在控制台中显示为空,
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>
你所得到的值select
和input
当脚本被加载。这意味着变量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);
我觉得这是问题所在,但我不知道它的应用。谢谢,我会在5分钟后在您的问题前面加正确的符号。
@cat我在答案中添加了另一个示例,以确保您了解字符串的工作方式。