I'm working on building a website to help people practice English. In this practice, the answer in the blank needs to be validated on hitting enter.
I'd like to know if there is a simpler/better way to write it since I need to use it for a lot of pages.
HTML:
<p>There’s an energy here. At least, I think there is. Is it just that I know this city to be so? That there can be skiing a half hour away on the north shore mountains <input class="fillBlank" type="text" id="one" placeholder="your answer"> there is tennis in the city?</p>
<p>But then, <input class="fillBlank" type="text" id="two" placeholder="your answer"> my walk I took this photo below.</p>
<p>The city is also lush which means that it rains on <input class="fillBlank" type="text" id="three" placeholder="your answer">. Okay, maybe more than occasionally at this time of year.</p>
CSS:
.fillBlank {
width: 100px;
border-radius: 0;
border: none;
background-color: #eff9f7;
padding: 3px;
text-align: center;
}
JS:
$("#vancouver").ready(function() {
$(".fillBlank").val("");
});
// vancouver quiz answer one
var one = document.getElementById("one");
one.addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
valone(e);
}
});
function valone(e) {
var one = document.getElementById("one").value;
if (one === "while") {
document.getElementById("one").style.color = "green";
}
else {
document.getElementById("one").style.color = "red";
}
}
// vancouver quiz answer two
var two = document.getElementById("two");
two.addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
valtwo(e);
}
});
function valtwo(e) {
var two = document.getElementById("two").value;
if (two === "on") {
document.getElementById("two").style.color = "green";
}
else {
document.getElementById("two").style.color = "red";
}
}
// vancouver quiz answer three
var three = document.getElementById("three");
three.addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
valthree(e);
}
});
function valthree(e) {
var three = document.getElementById("three").value;
if (three === "occasion") {
document.getElementById("three").style.color = "green";
}
else {
document.getElementById("three").style.color = "red";
}
}
on
on all the elements. Demo. Will suggest to usekeyup
andblur
, check demo \$\endgroup\$