I have written some pretty complicated JavaScript code to dynamically create multiple input fields and dropdown boxes based on a number entered by the user in a text field.
Here's a basic overview: the script checks if a number is being used, then determines whether it is less than five, and finally identifies which specific number it is. I then duplicated the text field and corresponding operations based on the identified number. Clearly, my JavaScript skills (and grammar) need some work.
Here is the code snippet:
function calculator() {
var boxNumber = document.getElementById('boxNumber').value;
var boxInt = parseInt(boxNumber);
var limit = new Number(5);
if (Math.floor(boxInt) == boxInt) {
if (boxInt <= limit) {
x = boxInt;
if (x == 5){
document.getElementById('opSpace').innerHTML = "<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>"
}
else {
if (x == 4) {
document.getElementById('opSpace').innerHTML = "<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>"
}
else {
if (x == 3) {
document.getElementById('opSpace').innerHTML = "<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>"
}
else {
if (x == 2) {
document.getElementById('opSpace').innerHTML = "<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>"
}
else {
if (x == 1) {
document.getElementById('opSpace').innerHTML = "<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>"
}
else {
alert("Please enter a positive number")
}
}
}
}
}
}
else {
alert("Please enter a number less than 5")
}
}
else {
alert("Invalid entry. Please enter a valid number.")
}
}
This code serves as the foundation for a calculator where the text fields determine the numbers to operate on and the drop-down menus define the operations to perform. Any assistance or guidance would be greatly appreciated.