gpt4 book ai didi

javascript - 提交不起作用

转载 作者:行者123 更新时间:2023-11-30 19:12:42 25 4
gpt4 key购买 nike

我需要在用户单击“提交”按钮检查他们的答案并根据给出的答案返回文本后执行该函数。当我输入文本并单击提交按钮时,没有任何反应。提交按钮应该在单击时执行该功能。然后根据答案是对还是错返回一些文本。我怀疑我的语法有问题,但我检查了很多次都无济于事。

这是我的代码:

 <!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Riddle Me This</title>
<link href="HW6Part2.css" type="text/css" rel="stylesheet"/>



</head>
<body>
<div class="text">
<h1 class="head1">First Riddle:</h1>
<p class="first">The more you take, the more you leave behind. What am I?</p>
<h1 class ="head2">Second Riddle:</h1>
<p class="second">What has a head, a tail, is brown, and has no legs?</p>
Input your answer: <br><br>
<form onsubmit="checkAnswer(event)">
Input your answer for the first riddle: <br><br>
<input id="a1" type="text">
<br><br>
Input your answer for the second riddle: <br><br>
<input id="a2" type="text">
<br>
<br>
<input type="submit" value="Submit">
</form>
<p id="response1"></p>

<script>
//Initiate function:
function checkAnswer() {
e.preventDefault();
//Get the user's input
var ans = document.getElementById('a1');
var ans2 = document.getElementById('a2');
//Compare input to the right answer
if (ans != 'footsteps' && ans2 != 'penny'){
document.getElementById('response1').innerHTML = 'Both answers are wrong! Try harder!';}
else if (ans == 'footsteps' && ans2 != 'penny'){
document.getElementById('response1').innerHTML = 'You have solved the first riddle, but failed on the second! Try harder!';}
else if (ans != 'footsteps' && ans2 == 'penny'){
document.getElementById('response1').innerHTML = 'You have solved the second riddle, but failed on the first! Try harder!';}
else{
document.getElementById('response1').innerHTML = 'You have solved both riddles, smartass. Have a cookie!';}
}

// When it loses focus call checkAnswer()
a1.addEventListener('blur', checkAnswer, false);

</script>

<br>
<br>






</div>
</body>
</html>

最佳答案

我已经检查了您的代码,并在第 44 行的“a2”处发现了语法错误。在下面的代码中,我修复了语法错误。下面的代码可以正常工作。

<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Riddle Me This</title>
<link href="HW6Part2.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h1>First Riddle:</h1>
<p>The more you take, the more you leave behind. What am I?</p>
<h1>Second Riddle:</h1>
<p>What has a head, a tail, is brown, and has no legs?</p>
Input your answer: <br><br>

Input your answer for the first riddle: <br><br>
<input id="a1" type="text">
<br><br>
Input your answer for the second riddle: <br><br>
<input id="a2" type="text">
<br>
<br>

<button onclick="checkAnswer()">Submit</button>

<script>
//Initiate function:
function checkAnswer() {
//Get the user's input
var ans = document.getElementById('a1');
var ans2 = document.getElementById('a2');
//Compare input to the right answer
if (ans != 'footsteps' && ans2 != 'penny'){
document.getElementById("response1").outerHTML = 'Both answers are wrong! Try harder!';}
else if (ans == 'footsteps' && ans2 != 'penny'){
document.getElementById("response1").outerHTML = 'You have solved the first riddle, but failed on the second! Try harder!';}
else if (ans != 'footsteps' && ans2 == 'penny'){
document.getElementById("response1").outerHTML = 'You have solved the second riddle, but failed on the first! Try harder!';}
else{
document.getElementById("response1").outerHTML = 'You have solved both riddles, smartass. Have a cookie!';}}
</script>
<br>
<br>
<p id="response1"></p>

</body>
</html>```

关于javascript - 提交不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58315052/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com