给定文本输入,用户可以通过提交点击按钮或Enter键提交答案:
</div>
<div class="answer">
<input type="text" placeholder="Enter your answer" class="answer_text" id="answer_text_box">
<input type="button" value="Answer" class="submit_button" id="answer_submit_button">
</div>
我想在用户提交答案后获取用户输入的文本值,可能会将其与项目列表list_options进行比较。
这里是我干活的地方;由于我对JS非常陌生,我想到将值写入html文档中的保持器标记,然后重新读取html文件并获取值..这似乎效率不高,因为我已经通过**.addEventListener**获取了值:
<div class="user_answer" id="user_answer_for_js"></div>
以下是我在JavaScript中的工作:
const answer_area = document.getElementById('answer_text_box');
const answer_btn = document.getElementById('answer_submit_button');
let list_options = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
// Load all events listerns
loadEventListeners();
// Load all events listerns
function loadEventListeners() {
// Submit answer via submit button:
answer_btn.addEventListener('click', submitButtonClick);
// Submit answer via enter key:
answer_area.addEventListener('keyup', submitEnterKey);
}
function submitButtonClick(e) {
let user_answer = answer_area.value;
document.getElementById("user_answer_for_js").textContent = user_answer.trim();
console.log(`Submit Via Enter Button: ${user_answer}`);
e.preventDefault();
}
function submitEnterKey(e) {
if (e.keyCode === 13) {
let user_answer = answer_area.value;
document.getElementById("user_answer_for_js").textContent = user_answer.trim();
console.log(`Submit Via Enter Key: ${user_answer}`);
e.preventDefault();
}
}
1条答案
按热度按时间lqfhib0f1#
为此,请将您的
<script>
标签放在您的<body>
标签的结尾之前:希望能有所帮助!