You are getting the values of the select and the input when the script gets loaded. This means that the variable getInputs (on the line var getInputs = UI.getInputs();) is an object that just contains two strings. Which is why the select always prints the same thing even if you change it.
You should instead return option: document.querySelector(DOMstrings.option) and Hello: document.querySelector(DOMstrings.Hello) in getInputs and then when enter gets pressed get the values console.log(getInputs.option.value); and 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>You mentioned you were new to JS, so I think I should clarify that strings in JS are primitive types and are passed by value rather than reference (meaning that if you copy a string and then change the original value the copy will not get affected).
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);
I felt that this was the problem but I did not know its application. thank you I will put the right sign in front of your question after 5 minutes.
@cat I added another example to the answer to make sure you understand how strings work.