选项是蓝色的,在javascript的帮助下,我正在检查选项背景颜色是否为蓝色,如果它不是蓝色则再执行其他警告某些文本。
function click_option_A() {
var clr_1_chk = document.getElementById("1");
//alert(clr_1_chk.style.backgroundColor);
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_4_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else{
var clr = "1";
var confirm = window.confirm("Are you sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor ="yellow";
var right_answer = "B";
if(right_answer == "A"){
//correct_ans();
setTimeout(correct_ans,3000);
}
else{
setTimeout(wrong_ans,3000);
}
}
}
}
function click_option_B() {
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_4_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else{
var clr = "2";
var confirm = window.confirm("Are you Sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor ="yellow";
var right_answer = "B";
if(right_answer == "B"){
//correct_ans();
setTimeout(correct_ans,3000);
}
else{
setTimeout(wrong_ans,3000);
}
}
}
}
function click_option_C() {
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_4_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else{
var clr = "3";
var confirm = window.confirm("Are you Sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor ="yellow";
var right_answer = "B";
if(right_answer == "C"){
//correct_ans();
setTimeout(correct_ans,3000);
}
else{
setTimeout(wrong_ans,3000);
}
}
}
}
function click_option_D() {
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_4_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else{
var clr = "4";
var confirm = window.confirm("Are you Sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor ="yellow";
var right_answer = "B";
if(right_answer == "D"){
//correct_ans();
setTimeout(correct_ans,3000);
}
else{
setTimeout(wrong_ans,3000);
}
}
}
}
function correct_ans(){
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
var clr = "1";
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
var clr = "2";
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
var clr = "3";
}
else{
var clr = "4";
}
//alert('correct');
document.getElementById(clr).style.backgroundColor ="green";
}
function wrong_ans(){
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
var clr = "1";
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
var clr = "2";
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
var clr = "3";
}
else{
var clr = "4";
}
document.getElementById(clr).style.backgroundColor ="red";
}

td{
background-color: blue;
color: white;
}

<div class="container">
<!--<form method="post" enctype="multipart/form-data" class="form-horizontal">-->
<table class="table table-bordered table-responsive">
<tr class="text-center">
<td colspan="2">Who was First Prime Minister of India?(15304)</td>
</tr>
<tr>
<td id="1" onclick="click_option_A()">A) M K Gandhi</td>
<td id="2" onclick="click_option_B()">B) Jawaharlal Nehru</td>
</tr>
<tr>
<td id="3" onclick="click_option_C()">C) Rajendra Prasad</td>
<td id="4" onclick="click_option_D()">D) Chandra Shekhar Azad</td>
</tr>
</table>
<!--</form>-->
</div>
&#13;
我尝试了上面的代码,但它始终提醒我,我已经锁定了答案,但我没有。
选项是蓝色的,在javascript的帮助下,我正在检查选项背景颜色是否为蓝色,如果它不是蓝色则再执行其他警告某些文本。
答案 0 :(得分:4)
您没有将样式设为blue
,而是空字符串,因为element.style
仅返回 内联样式 ,不是CSS定义的那些。
如果您需要CSS样式,则必须使用window.getComputedStyle(<element>)
获取计算样式。
在下面的代码段中,我为td
设置了内联样式。因此,您将获得blue
的样式。
function click_option_A() {
var clr_1_chk = document.getElementById("1");
//alert(clr_1_chk.style.backgroundColor);
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_4_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else{
var clr = "1";
var confirm = window.confirm("Are you sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor ="yellow";
var right_answer = "B";
if(right_answer == "A"){
//correct_ans();
setTimeout(correct_ans,3000);
}
else{
setTimeout(wrong_ans,3000);
}
}
}
}
function click_option_B() {
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_4_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else{
var clr = "2";
var confirm = window.confirm("Are you Sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor ="yellow";
var right_answer = "B";
if(right_answer == "B"){
//correct_ans();
setTimeout(correct_ans,3000);
}
else{
setTimeout(wrong_ans,3000);
}
}
}
}
function click_option_C() {
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_4_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else{
var clr = "3";
var confirm = window.confirm("Are you Sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor ="yellow";
var right_answer = "B";
if(right_answer == "C"){
//correct_ans();
setTimeout(correct_ans,3000);
}
else{
setTimeout(wrong_ans,3000);
}
}
}
}
function click_option_D() {
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_4_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else{
var clr = "4";
var confirm = window.confirm("Are you Sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor ="yellow";
var right_answer = "B";
if(right_answer == "D"){
//correct_ans();
setTimeout(correct_ans,3000);
}
else{
setTimeout(wrong_ans,3000);
}
}
}
}
function correct_ans(){
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
var clr = "1";
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
var clr = "2";
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
var clr = "3";
}
else{
var clr = "4";
}
//alert('correct');
document.getElementById(clr).style.backgroundColor ="green";
}
function wrong_ans(){
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
var clr = "1";
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
var clr = "2";
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
var clr = "3";
}
else{
var clr = "4";
}
document.getElementById(clr).style.backgroundColor ="red";
}
td{
background-color: blue;
color: white;
}
<div class="container">
<!--<form method="post" enctype="multipart/form-data" class="form-horizontal">-->
<table class="table table-bordered table-responsive">
<tr class="text-center">
<td colspan="2">Who was First Prime Minister of India?(15304)</td>
</tr>
<tr>
<td id="1" style="background-color: blue;color: white;" onclick="click_option_A()">A) M K Gandhi</td>
<td style="background-color: blue;color: white;" id="2" onclick="click_option_B()">B) Jawaharlal Nehru</td>
</tr>
<tr>
<td style="background-color: blue;color: white;" id="3" onclick="click_option_C()">C) Rajendra Prasad</td>
<td style="background-color: blue;color: white;" id="4" onclick="click_option_D()">D) Chandra Shekhar Azad</td>
</tr>
</table>
<!--</form>-->
</div>
我建议你保留一些JS对象来检查选项并提供正确的答案。建议不要引用对象样式来获取用户选项。
答案 1 :(得分:3)
当Prajwal走在正确的轨道上时,他的答案并不完全。调用getComputedStyle()
时,backgroundColor
将返回RGB值。您将需要检查而不是字符串&#34; blue&#34;。所以在你的情况下getComputedStyle(clr_1_chk).backgroundColor === "rgb(0, 0, 255)";
但是,最佳做法是将您的问题存储在一组javascript对象中。在那里,您可以存储正确的答案以及问题是否被锁定。根据要求,我已经模拟了一个快速的虚拟示例,说明代码的样子。我基本上使用JS来创建HTML。我没有包含您要求的setTimeout
,但我确定您可以轻松添加此内容。请确保包含HTML,CSS和JS以实现此目的。请注意问题4之后的错误只是说没有其他问题要生成。希望这能为您提供一些开始:
var questions = [{
questionId: "question1",
answerId: "B",
question: "Who was First Prime Minister of India?(15304)",
options: ["A) M K Gandhi", "B) Jawaharlal Nehru", "C) Rajendra Prasad", "D) Chandra Shekhar Azad"],
answer: "B) Jawaharlal Nehru",
locked: false
},
{
questionId: "question2",
answerId: "D",
question: "What is 2 + 2",
options: ["A) 1", "B) 2", "C) 3", "D) 4"],
answer: "D) 4",
locked: false
},
{
questionId: "question3",
question: "What is 2 - 1",
answerId: "A",
options: ["A) 1", "B) 2", "C) 3", "D) 4"],
answer: "A) 1",
locked: false
},
{
questionId: "question4",
answerId: "C",
question: "What is 2 + 4",
options: ["A) 1", "B) 2", "C) 6", "D) 4"],
answer: "C) 6",
locked: false
}
];
var allHtml;
var table = document.getElementById("test");
var i = 0;
document.querySelector("#start").innerHTML = `<button onclick="startTest()">START TEST</button>`;
function generateQuestion(question) {
i += 1;
var newQuestion = `
<tr class="text-center">
<td colspan="2">${question.question}</td>
</tr>
<tr>
<td id="A${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[0]}</td>
<td id="B${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[1]}</td>
</tr>
<tr>
<td id="C${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[2]}</td>
<td id="D${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[3]}</td>
</tr>
`;
allHtml = table.innerHTML + newQuestion;
table.innerHTML = allHtml;
}
function onSelect(e) {
var selection = e.currentTarget;
var questionId = e.currentTarget.className;
var currentQuestion = questions.find(function(q) {
return q.questionId == questionId
});
if (currentQuestion.locked) {
alert("Question already answered");
return;
} else if (currentQuestion.answer === e.currentTarget.innerText) {
alert("Correct!!!");
currentQuestion.locked = true;
selection.classList.add('correct');
} else {
alert("Incorrect...");
currentQuestion.locked = true;
selection.classList.add('incorrect');
document.getElementById(currentQuestion.answerId + i).classList.add('correct');
}
generateQuestion(questions[i]);
}
function startTest() {
generateQuestion(questions[i]);
document.querySelector("#start").innerHTML = '';
}
&#13;
.correct {
background-color: green;
}
.incorrect {
background-color: red;
}
&#13;
<div id="start"></div>
<table id="test"></table>
&#13;
我在这里做的是将答案类设置为对象中的问题ID。然后使用它我从答案数组中得到正确的问题。我检查确保答案没有锁定,然后我得到答案的innerText并检查对象中的答案ID。最后,我在用户回答后锁定问题,并将css类应用于正确的答案和错误的选择(如果适用)。完成所有操作后,我致电generateQuestion
创建下一个问题。
以下是您问题中更新的代码正常运行。另外,虽然在我的回答中没有更新,但你真的应该重命名你的id。最好以字母[A-Za-z]开头。:
function click_option_A() {
var clr_1_chk = document.getElementById("1");
//alert(clr_1_chk.style.backgroundColor);
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
console.log(getComputedStyle(clr_1_chk).backgroundColor);
if (getComputedStyle(clr_1_chk).backgroundColor != "rgb(0, 0, 255)") {
alert("You have already locked the answer!")
} else if (getComputedStyle(clr_2_chk).backgroundColor != "rgb(0, 0, 255)") {
alert("You have already locked the answer!")
} else if (getComputedStyle(clr_3_chk).backgroundColor != "rgb(0, 0, 255)") {
alert("You have already locked the answer!")
} else if (getComputedStyle(clr_4_chk).backgroundColor != "rgb(0, 0, 255)") {
alert("You have already locked the answer!")
} else {
var clr = "1";
var confirm = window.confirm("Are you sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor = "yellow";
var right_answer = "B";
if (right_answer == "A") {
//correct_ans();
setTimeout(correct_ans, 3000);
} else {
setTimeout(wrong_ans, 3000);
}
}
}
}
function click_option_B() {
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if (getComputedStyle(clr_1_chk).backgroundColor != "rgb(0, 0, 255)") {
alert("You have already locked the answer!")
} else if (getComputedStyle(clr_2_chk).backgroundColor != "rgb(0, 0, 255)") {
alert("You have already locked the answer!")
} else if (getComputedStyle(clr_3_chk).backgroundColor != "rgb(0, 0, 255)") {
alert("You have already locked the answer!")
} else if (getComputedStyle(clr_4_chk).backgroundColor != "rgb(0, 0, 255)") {
alert("You have already locked the answer!")
} else {
var clr = "2";
var confirm = window.confirm("Are you Sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor = "yellow";
var right_answer = "B";
if (right_answer == "B") {
//correct_ans();
setTimeout(correct_ans, 3000);
} else {
setTimeout(wrong_ans, 3000);
}
}
}
}
function click_option_C() {
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if (getComputedStyle(clr_1_chk).backgroundColor != "rgb(0, 0, 255)") {
alert("You have already locked the answer!")
} else if (getComputedStyle(clr_2_chk).backgroundColor != "rgb(0, 0, 255)") {
alert("You have already locked the answer!")
} else if (getComputedStyle(clr_3_chk).backgroundColor != "rgb(0, 0, 255)") {
alert("You have already locked the answer!")
} else if (getComputedStyle(clr_4_chk).backgroundColor != "rgb(0, 0, 255)") {
alert("You have already locked the answer!")
} else {
var clr = "3";
var confirm = window.confirm("Are you Sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor = "yellow";
var right_answer = "B";
if (right_answer == "C") {
//correct_ans();
setTimeout(correct_ans, 3000);
} else {
setTimeout(wrong_ans, 3000);
}
}
}
}
function click_option_D() {
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if (getComputedStyle(clr_1_chk).backgroundColor != "rgb(0, 0, 255)") {
alert("You have already locked the answer!")
} else if (getComputedStyle(clr_2_chk).backgroundColor != "rgb(0, 0, 255)") {
alert("You have already locked the answer!")
} else if (getComputedStyle(clr_3_chk).backgroundColor != "rgb(0, 0, 255)") {
alert("You have already locked the answer!")
} else if (getComputedStyle(clr_4_chk).backgroundColor != "rgb(0, 0, 255)") {
alert("You have already locked the answer!")
} else {
var clr = "4";
var confirm = window.confirm("Are you Sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor = "yellow";
var right_answer = "B";
if (right_answer == "D") {
//correct_ans();
setTimeout(correct_ans, 3000);
} else {
setTimeout(wrong_ans, 3000);
}
}
}
}
function correct_ans() {
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if (getComputedStyle(clr_1_chk).backgroundColor != "rgb(0, 0, 255)") {
var clr = "1";
} else if (getComputedStyle(clr_2_chk).backgroundColor != "rgb(0, 0, 255)") {
var clr = "2";
} else if (getComputedStyle(clr_3_chk).backgroundColor != "rgb(0, 0, 255)") {
var clr = "3";
} else {
var clr = "4";
}
//alert('correct');
document.getElementById(clr).style.backgroundColor = "green";
}
function wrong_ans() {
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if (getComputedStyle(clr_1_chk).backgroundColor != "rgb(0, 0, 255)") {
var clr = "1";
} else if (getComputedStyle(clr_2_chk).backgroundColor != "rgb(0, 0, 255)") {
var clr = "2";
} else if (getComputedStyle(clr_3_chk).backgroundColor != "rgb(0, 0, 255)") {
var clr = "3";
} else {
var clr = "4";
}
document.getElementById(clr).style.backgroundColor = "red";
}
&#13;
td {
background-color: blue;
color: white;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!--<form method="post" enctype="multipart/form-data" class="form-horizontal">-->
<table class="table table-bordered table-responsive">
<tr class="text-center">
<td colspan="2">Who was First Prime Minister of India?(15304)</td>
</tr>
<tr>
<td id="1" onclick="click_option_A()">A) M K Gandhi</td>
<td id="2" onclick="click_option_B()">B) Jawaharlal Nehru</td>
</tr>
<tr>
<td id="3" onclick="click_option_C()">C) Rajendra Prasad</td>
<td id="4" onclick="click_option_D()">D) Chandra Shekhar Azad</td>
</tr>
</table>
<!--</form>-->
</div>
&#13;