本文介绍了如果用户的答案是正确的，如何更改背景颜色？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一系列的问题和答案。我只想要，如果用户在文本字段中键入正确的答案，文本字段的背景颜色将被更改，而无需任何单击。我编写checkAnswer函数的代码很困难。你能帮我写一下正确的代码吗？
我尝试了什么：
< body>
< div id =container>
< h1>写完答案后按Enter键。 < / H1>
< form>
< input type =textclass =inputname =questions []/>
< input type =textclass =output/>
< input type =textclass =inputname =questions []/>
< input type =textclass =output/>
< input type =textclass =inputname =questions []/>
< input type =textclass =output/>
< input type =textclass =inputname =questions []/>
< input type =textclass =output/>
< input type =textclass =inputname =questions []/>
< input type =textclass =output/>
< / form>
< a id =subhref =＃>提交< / a>
< div id =result> < / DIV>
< / div>
< / body>
< script>
var questions = [
{
问题：我喜欢喝茶。，
回答：我不喜欢喝茶。，
ans ：我不喜欢喝茶。
}，
{
问题：你是我的朋友。，
回答：你不是我的朋友。，
ans： 你不是我的朋友。
}，
{
问题：她非常顽皮。，
回答：她不是很顽皮，
ans：她不是很顽皮。
}，
{
问题：你可以做到。，
回答：你不能这样做，
ans：你做不到。
}，
{
问题：他们很好。，
回答：他们不好。，
ans：他们不好。
}，
];
$（'document'）。ready（function（）{
$ .each（questions，function（i，x）{
$（'。input'）。eq（i）.val（x.question）;
$（'。input'）。prop（'readonly'， true）;
}）;
}）;
< pre> function checkAnswer（）{
for（i = 0; i< questions.length; i ++）{
let realanswer = questions [i];
让useranswer = $（'。output'）。val（）;
if（realanswer.answer == useranswer）{
$（。output）。style.background =green;
}
}
checkAnswer（）;
}
< / script>
解决方案
I have an array of questions and answers. I just want that if the user types the right answer in the text field, the background color of the text field gets changed without any click. I have difficulty writing the code of checkAnswer function. Could you please help me write the correct code ?
What I have tried:
<body>
<div id="container">
<h1> Press 'Enter' after writing your answer. </h1>
<form>
<input type="text" class="input" name="questions[]" />
<input type="text" class="output" />
<input type="text" class="input" name="questions[]" />
<input type="text" class="output" />
<input type="text" class="input" name="questions[]" />
<input type="text" class="output" />
<input type="text" class="input" name="questions[]" />
<input type="text" class="output" />
<input type="text" class="input" name="questions[]" />
<input type="text" class="output" />
</form>
<a id="sub" href="#"> Submit </a>
<div id="result"> </div>
</div>
</body>
<script>
var questions = [
{
question: "I like tea.",
answer: "I do not like tea.",
ans: "I don't like tea."
},
{
question: "You are my friend.",
answer: "You are not my friend.",
ans: "You aren't my friend."
},
{
question: "She is very naughty.",
answer: "She is not very naughty",
ans: "She isn't very naughty."
},
{
question: "You can do it.",
answer: "You cannot do it",
ans: "You can't do it."
},
{
question: "They are good.",
answer: "They are not good.",
ans: "They aren't good."
},
];
$('document').ready(function() {
$.each(questions, function(i, x) {
$('.input').eq(i).val(x.question);
$('.input').prop('readonly', true);
});
});
<pre> function checkAnswer() {
for (i = 0; i < questions.length; i++) {
let realanswer = questions[i];
let useranswer = $('.output').val();
if (realanswer.answer == useranswer) {
$(".output").style.background = "green";
}
}
checkAnswer();
}
</script>
解决方案
这篇关于如果用户的答案是正确的，如何更改背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！