Develop Reference

What is an efficient way to check if an HTML input is right or wrong?

I'm creating a quiz with <input type="text"> and <input type="number">.
I find that making a bunch of if / else statements is extremely inefficient, due to the bulk of the JavaScript code.
Here is my HTML code:
<!--Question 1-->
<label for="a">A cow says =</label>
<input type="text" id="a"/>
<!--Question 2-->
<label for="a">1 + 1 =</label>
<input type="number" id="b"/>
<button onclick="checkQuiz()">Check Quiz</button>
Here is my JavaScript code:
var a = document.getElementById("a")
var b = document.getElementById("b")
function checkQuiz() {
// Question 2
if (a.value == "moo") {
console.log("correct")
}
else {
console.log("wrong")
}
// Question 2
if (b.value == "2") {
console.log("correct")
}
else {
console.log("wrong")
}
}
I'm down for some Jquery code answers, just I'm also don't know much about it.

Make an array of correct answers, and look up the index of the question input in the answer array to compare the appropriate value.
// tweak the selector as needed
// you'll probably want something more precise
const questionInputs = document.querySelectorAll('input');
const correctAnswers = ['moo', '2'];
function checkQuiz() {
questionInputs.forEach((input, i) => {
console.log(`Question ${i + 1}: ${input.value === correctAnswers[i] ? 'Correct' : 'Wrong'}`);
});
}
<!--Question 1-->
<label for="a">A cow says =</label>
<input type="text" id="a"/>
<!--Question 2-->
<label for="a">1 + 1 =</label>
<input type="number" id="b"/>
<button onclick="checkQuiz()">Check Quiz</button>

How can I prevent my program from converting selected number which starts with 0 to octal value using javascript?

When I select a number that starts with 0, such a number is converted to its octal form which I don't want but works perfectly well for those that didn't start with 0. Attached is pictures explaining what I mean.
Before Selection of Number starting with 0
After Selection of Number starting with 0
From the picture you can see 0703 got converted to 451. How can I stop this.
let phoneNumberSelector = document.querySelector("#phone");
const mtnNumber = ['703', '706', '803', '806', '810', '813', '814', '816', '903', '906', '913', '0703', '0706'];
phoneNumberSelector.addEventListener('keyup', (e) => {
removeElements();
for (let i of mtnNumber) {
// i = i.toString();
if (i.startsWith(phoneNumberSelector.value) && phoneNumberSelector.value != '') {
let listItem = document.createElement("li");
listItem.classList.add('list-items');
listItem.style.cursor = 'pointer';
listItem.setAttribute('onclick', "displayNames(" + i + ")")
let word = "<b>" + i.slice(0, phoneNumberSelector.value.length) + "</b>";
word += i.slice(phoneNumberSelector.value.length);
listItem.innerHTML = word;
document.querySelector('.list').appendChild(listItem);
}
}
})
function displayNames(param) {
phoneNumberSelector.value = param;
removeElements();
}
function removeElements() {
let items = document.querySelectorAll('.list-items')
items.forEach((element) => {
element.remove();
});
}
<section class="section1"></section>
<section class="section2">
<div class="reg-form">
<form action="" method="">
<div class="form-container">
<h1 style="text-align: center;">Phonie</h1>
<div class="input-reg email-input">
<label for="username">Username</label>
<input id="username" type="text" name="username">
</div>
<div class="list-div">
<ul class="list"></ul>
</div>
<div class="input-reg email-input">
<label for="phone">Phone Number</label>
<input id="phone" type="text" name="phone">
</div>
<div class="input-reg email-input">
<input class="submit-btn submit-btn2" type="submit" value="Check Number">
</div>
</div>
</form>
</div>
</section>

The numbers are getting converted to octal because you are passing the number (of type string) to the displayNames function as a number (without quotes).
This is the offending line:
listItem.setAttribute('onclick', "displayNames(" + i + ")")
with the value of i set to "0703", the value for onclick becomes "displayNames(0703)".
You can fix this by adding quotes around the i variable in the string passed as onclick.
For example:
listItem.setAttribute('onclick', "displayNames('" + i + "')");
or with a string template to make it a bit easier to read:
listItem.setAttribute('onclick', `displayNames("${i}")`);

Adding values to placeholder using checkbox

Basically I have 4 checkbox elements in my form and a text field up top. The text field has a placeholder with a product name — product price format. Each checkbox has a product name and product price as well, and I want to use javascript to change the placeholder value once a checkbox is checked. The issue is that the product price should be a SUM of default placeholder base price and the product price of the checkbox that was checked. The first part of the placeholder should change from product name to product name + product name.
So far I have only been able to use javascript to change the value of the placeholder entirely, which would work if I had only one checkbox, but I have 4 so it doesn't.
In a perfect world the placeholder should display Basic Package + Video + Picture + Tour + Emergency — €30 when all checkboxes are checked, and Basic Package + Picture + Tour — €20 when only Option2 and Option3 are checked. And so on, and so on.
Here is a simplified code of what I am trying to achieve (note: only Video works in my code):
$('.Option1').on('change', function(e) {
if ($(this).is(':checked') === true) {
$('.PriceInput').attr('placeholder', 'Basic Package + Video — €15');
} else $('.PriceInput').attr('placeholder', 'Basic Package — €10');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="ajax-contact-basic" method="post" action="mailer-basic.php">
<div class="field">
<input class="form-control PriceInput" type="text" name="basicpackage" id="basicpackage" placeholder="Basic Package — €10" disabled />
</div>
<div class="field">
<input class="Option1" type="checkbox" id="videobasic" name="optiesbasic[]" value="Video">
<label for="videobasic">Video — €5</label>
</div>
<div class="field">
<input class="Option2" type="checkbox" id="picturebasic" name="optiesbasic[]" value="Picture">
<label for="picturebasic">Picture — €5</label>
</div>
<div class="field">
<input class="Option3" type="checkbox" id="tourbasic" name="optiesbasic[]" value="Tour">
<label for="tourbasic">Tour — €5</label>
</div>
<div class="field">
<input class="Option4" type="checkbox" id="emergencybasic" name="optiesbasic[]" value="Emergency">
<label for="emergencybasic">Emergency — €5</label>
</div>

I've removed the number from each class="Option"
then you can do something like this:
$('.Option').on('change', function(e) {
var s = "";
var p = 10;
$('.Option').each(function() {
if ($(this).is(':checked') === true) {
s += " + " + $(this).val();
var tempP = +$(this).next().text().split('€')[1];
p = p + tempP;
}
});
$('.PriceInput').attr('placeholder', 'Basic Package' + s + ' — €' + p);
});
Demo
$('.Option').on('change', function(e) {
var s = "";
var p = 10;
$('.Option').each(function() {
if ($(this).is(':checked') === true) {
s += " + " + $(this).val();
var tempP = +$(this).next().text().split('€')[1];
p = p + tempP;
}
});
$('.PriceInput').attr('placeholder', 'Basic Package' + s + ' — €' + p);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="ajax-contact-basic" method="post" action="mailer-basic.php">
<div class="field">
<input class="form-control PriceInput" type="text" name="basicpackage" id="basicpackage" placeholder="Basic Package — €10" disabled />
</div>
<div class="field">
<input class="Option" type="checkbox" id="videobasic" name="optiesbasic[]" value="Video">
<label for="videobasic">Video — €5</label>
</div>
<div class="field">
<input class="Option" type="checkbox" id="picturebasic" name="optiesbasic[]" value="Picture">
<label for="picturebasic">Picture — €5</label>
</div>
<div class="field">
<input class="Option" type="checkbox" id="tourbasic" name="optiesbasic[]" value="Tour">
<label for="tourbasic">Tour — €5</label>
</div>
<div class="field">
<input class="Option" type="checkbox" id="emergencybasic" name="optiesbasic[]" value="Emergency">
<label for="emergencybasic">Emergency — €5</label>
</div>

Trying to transform words in an array and output them onto the page, using forEach method, but each entry overwrites the previous item?

I'm trying to wrap the words that are entered into the text area, by splitting them into an array, and using the foreach method to wrap each word in different keyword styles. Which all works in the console. But when I try and output it onto the DOM, it only displays the LAST item in the array, as they are overwriting the previous items... I might be going about it the wrong way, open to suggestions for re-factoring.
For example:
If you type in
'mens shoes, cheap mens shoes, affordable mens shoes'
It only displays: +affordable +mens +shoes.
I want it to display all of them in the new format.
const mainInput = document.getElementById('main-input');
const mainOutput = document.getElementById('main-output');
let keywordsArray;
mainInput.addEventListener('input', updateValue);
function updateValue(e) {
const mainInput = document.getElementById('main-input');
const mainOutput = document.getElementById('main-output');
keywordsArray = mainInput.value.split('\n');
keywordsArray.forEach(textUpdater);
function textUpdater(item, index, array) {
console.log(item)
console.log(item.replace(/(^|\s+)/g, "$1+"))
console.log('[' + item + ']');
console.log('"' + item + '"');
mainOutput.innerText = '[' + item + ']';
};
}
<div class="container">
<div class="input-box">
<textarea name="main-input" id="main-input" class="main-input" cols="30" rows="10" placeholder="Enter Keywords Here..."></textarea>
<p>What match types?</p>
<div class="type-selectors">
<p>Broad:</p> <input type="checkbox" id="broadCheck" checked onclick="updateValue()">
<p>Modified:</p> <input type="checkbox" id="modifiedCheck" checked onclick="updateValue()">
<p>Phrase:</p> <input type="checkbox" id="phraseCheck" checked onclick="updateValue()">
<p>Exact:</p> <input type="checkbox" id="exactCheck" checked onclick="updateValue()">
</div>
</div>
<div class="output-box">
<textarea class="main-output" id="main-output"></textarea>
</div>
</div>

You should use += to append text instead of overwriting the previous text. Moreover, you should set the value of the textarea instead of it's innerText.
mainOutput.innerText = '[' + item + ']';
Should be changed to:
mainOutput.value += '[' + item + ']';
const mainInput = document.getElementById('main-input');
const mainOutput = document.getElementById('main-output');
let keywordsArray;
mainInput.addEventListener('input', updateValue);
function updateValue(e) {
const mainInput = document.getElementById('main-input');
const mainOutput = document.getElementById('main-output');
keywordsArray = mainInput.value.split('\n');
keywordsArray.forEach(textUpdater);
function textUpdater(item, index, array) {
//console.log(item)
//console.log(item.replace(/(^|\s+)/g, "$1+"))
//console.log('[' + item + ']');
//console.log('"' + item + '"');
mainOutput.value += '[' + item + ']';
};
}
<div class="container">
<div class="input-box">
<textarea name="main-input" id="main-input" class="main-input" cols="30" rows="10" placeholder="Enter Keywords Here..."></textarea>
<p>What match types?</p>
<div class="type-selectors">
<p>Broad:</p> <input type="checkbox" id="broadCheck" checked onclick="updateValue()">
<p>Modified:</p> <input type="checkbox" id="modifiedCheck" checked onclick="updateValue()">
<p>Phrase:</p> <input type="checkbox" id="phraseCheck" checked onclick="updateValue()">
<p>Exact:</p> <input type="checkbox" id="exactCheck" checked onclick="updateValue()">
</div>
</div>
<div class="output-box">
<textarea class="main-output" id="main-output"></textarea>
</div>
</div>

Function that will only push value of most recent inputs

I have 3 groups of inputs, in chronological order (manufacturer info, repair info, test info). When the user hits the "confirm button", I want an if statement to iterate through each input, compare if (input.val() !== ""), and then make sure it is the most recent data (ie. repair info will supercede mfg info) before pushing that value to the #asreceived fields.
I have manually done an if statement for each set of inputs to iterate through, however I would have to add to the function if I wanted to enter more fields.
This is what I have currently:
$("#model-received").val(function() {
if ($("#model-test").val() != "") {
return $("#model-testonly").val();
} else if ($("#model-repair").val() != "") {
return $("#model-repair").val();
} else {
return $("#model-initial").val();
}
});
I have used this code for each set of inputs (roughly 50)
I have tried to compare groups using the .each(), but I am stuck here.
let $inputMfg = $("#manufacturers-tag").find("input , select").each(function() {
if ($(this).attr("name").indexOf("-initial") > -1) {
return
}
});
let $inputRep = $("#repairtag-old").find("input , select").each(function() {
if ($(this).attr("name").indexOf("-repair") > -1) {
return
}
});
let $inputTO = $("#testonlytag-old").find("input , select").each(function() {
if ($(this).attr("name").indexOf("-testonly") > -1) {
return
}
});
let $inputAsRec = $("#asreceived").find("input , select").each(function() {
if ($(this).attr("name").indexOf("-received") > -1) {
return
}
});
$("#asreceived"),$("#testonlytag-old"),$("#repairtag-old"),$("#manufacturers-tag") are all the same HTML, minus the name suffix on each input ("-initial")
HTML
<div id="repairtag-old" hidden>
<div class="entry-col3">
<div class="entry-line">
<label class="entry-label">Company: </label>
<input class="entry-input" type="text" name="company-repair">
</div>
</div>
<div class="entry-col3">
<div class="entry-line">
<label class="entry-label">Date: </label>
<input class="entry-date" type="date" name="date-repair">
</div>
</div>
<div class="entry-col3">
<div class="entry-line">
<label class="entry-label">VR Stamp: </label>
<select class="entry-select" id="vrstamp-old" name="vrstamp-old">
<option></option>
<option>Yes</option>
<option>No</option>
</select>
<label class="entry-bylabel">VR: </label>
<input class="entry-input" type="text" name="vrnumber-old">
</div>
</div>
<div class="entry-col2">
<div class="entry-line">
<label class="entry-label">Job Number: </label>
<input class="entry-input" type="text" name="jobnumber-repair">
</div>
</div>
<div class="entry-col2">
<div class="entry-line">
<label class="entry-label">Model Number: </label>
<input class="entry-input" id="model-repair" type="text" name="model-repair">
</div>
</div>
<div class="entry-col3">
<div class="entry-line">
<label class="entry-label">Set Pressure: </label>
<input class="entry-input" id="setpressure-repair" type="text" name="setpressure-repair">
<select class="entry-select" name="setunit-repair">
<option>psig</option>
</select>
</div>
</div>
<div class="entry-col3">
<div class="entry-line">
<label class="entry-label">Cold Test Pressure: </label>
<input class="entry-input" type="text" name="coldpressure-repair">
<select class="entry-select" name="coldunit-repair">
<option>psig</option>
</select>
</div>
</div>
<div class="entry-col3">
<div class="entry-line">
<label class="entry-label">Capacity: </label>
<input class="entry-input" type="text" name="capacity-repair">
<select class="entry-select" name="capacityunit-repair">
<option>scfm</option>
</select>
</div>
</div>
<br>
</div>
The final result should push the value of the most important value (test only 1st, repair 2nd, mfg 3rd). If the (input.val === ""), it should use the older values.
---UPDATED---
I figured it out. Code snippet below. Thank you for the responses, I was a little intimated in trying to implement them (I am new at coding). However, Mark Meyer's response got me on the right track. This works exactly as intended.
$("#copybtn-received").click(function(i) {
$("#asreceived").find("input, select").each(function() {
let $output = $(this).attr("name").split("-received")[0];
let $inputTO = $("#testonlytag-old").find("[name^=" + $output + "]");
let $inputRep = $("#repairtag-old").find("[name^=" + $output + "]");
let $inputMfg = $("#manufacturers-tag").find("[name^=" + $output + "]");
if ($inputTO.val() !== "") {
$(this).val($inputTO.val());
} else if ($inputRep.val() !== "") {
$(this).val($inputRep.val());
} else if ($inputMfg.val() !== "") {
$(this).val($inputMfg.val());
} else {
$(this).val("");
}
});
});

You could put your values in an array that is in the order of precedence you want then use find() which returns the first value found. In the find callback just return whether the value is truth, which "" isn't. This will allow you to decide arbitrary orders without all the if/else statements.
Here's a simplified example. It will log the highest value filled in.
function getBest(){
/* values in the order values will be found */
let values = [
document.getElementById("one").value,
document.getElementById("two").value,
document.getElementById("three").value,
document.getElementById("four").value
]
/* find the first truthy value */
let best = values.find(val => val)
console.log(best)
}
<input id="one" type ="text"><br />
<input id="two" type ="text"><br />
<input id="three" type ="text"><br />
<input id="four" type ="text"><br />
<button onclick="getBest()">Go</button>

I'm not sure I understand the question correctly, so this is a bit of a guess. Perhaps something like this would do?:
const findFirst = (ids, idx = ids.find(id => $(`#${id}`).val() !== '')) =>
idx > -1 ? $(`#${id}`).val() : 'not found'
$("#model-received").val(findFirst(
['model-testonly', 'model-repair', 'model-initial']
))
You can then update the list by simply appending to that array. And if the 'model-' prefix is universal, you can include that in the function and only pass ['testonly', 'repair', 'initial'] in the call.
I don't know if you have a better default than the 'not found' here.