I've created a JavaScript function that generates div elements and styles them based on user input values. However, I'm facing an issue when trying to display a warning message if the input is not a number. Currently, I'm unable to create the div elements at all; only the warning about the input not being a number pops up.
Here's my code:
function genFigures(){
var numberFig = numberFigInput.value;
var widthValue = figWidthInput.value;
var heightValue = figHeightInput.value;
var colorValue = figRgbInput.value;
var leftValue = figPosLeftInput.value;
var topValue = figPosTopInput.value;
if (numberFig >= 1001){
alert("You need to input a value between 1 and 1000!");
}if (isNaN(numberFigInput) && isNaN(figWidthInput) && isNaN(figWidthInput) && isNaN(figPosLeftInput) && isNaN(figPosTopInput)){
alert("You have to insert a number!");
}else{
for(var amount = 0; amount < numberFig; amount++){
myFigures.innerHTML += "<div></div>";
var figStyle = document.getElementsByTagName("div");
for(var i = 0; i < figStyle.length; i++){
figStyle[i].style.width = widthValue +"px";
figStyle[i].style.height = heightValue +"px";
figStyle[i].style.background = "rgb(" + colorValue + ")";
figStyle[i].style.left = leftValue +"px";
figStyle[i].style.top = topValue +"px";
}
}
}
}