JS - Как установить ширину и высоту div из входного значения?

Question

Итак, я создаю коробку с использованием JavaScript, а затем я хочу установить ширину и высоту указанного окна с использованием двух входных форм, один для ширины и один для высоты. Кажется, я не могу этого сделать.

Вот HTML код:

<form action="" id="theForm"> 
    <label for="width">Box Width: </label> 
    <input type="text" id="width" name="width"> 

    <label for="height">Box Height: </label> 
    <input type="text" id="height" name="height"> 

    <input type="submit" value="Create Box" id="submit-btn"> 
</form> 

Вот код JS:

var form = document.getElementById("theForm"), 
    box = document.createElement("div"); 

    document.body.appendChild(box); 

form.addEventListener("submit", function() { 
    var width = form.elements["width"].value, 
     height = form.elements["height"].value; 

    box.style.width = width + "px"; 
    box.style.height = height + "px"; 
}); 

Кажется, работает хорошо, когда я установить ширину и высоту вручную, но не тогда, когда я пытаюсь получить его из вход. Я довольно новичок в JS, поэтому любая помощь будет принята с благодарностью.

Answer 1

я бы, вероятно, согласен с @ epascarello отвечают, но вместо того, чтобы вернуться ложным, я бы использовал preventDefault();

form.addEventListener("submit", function(e) { // Don't forget to pass the 'e' parameter 
    var width = form.elements["width"].value, 
    height = form.elements["height"].value; 

    box.style.width = width + "px"; 
    box.style.height = height + "px"; 

    e.preventDefault(); 
}); 

Использование preventDefault позволит предотвратить поведение по умолчанию из событие beeing прошло, которое является формой submit.

Вы можете использовать его со ссылками и другими материалами.

Answer 2

Форма отправляется, поэтому страница обновляется. Вам необходимо отменить отправку формы.

var form = document.getElementById("theForm"), 
 
    box = document.createElement("div"); 
 

 
    document.body.appendChild(box); 
 

 
form.addEventListener("submit", function() { 
 
    var width = form.elements["width"].value, 
 
     height = form.elements["height"].value; 
 

 
    box.style.width = width + "px"; 
 
    box.style.height = height + "px"; 
 
    
 
    return false; 
 
});

div { background-color: #CFC; }

<form action="" id="theForm"> 
 
    <label for="width">Box Width: </label> 
 
    <input type="text" id="width" name="width"> 
 

 
    <label for="height">Box Height: </label> 
 
    <input type="text" id="height" name="height"> 
 

 
    <input type="submit" value="Create Box" id="submit-btn"> 
 
</form>

Answer 3

работает для меня с одним изменением: добавление return false; к проводнику, так что представить не проходит и повторно загрузить страницу.

var form = document.getElementById("theForm"); 
 

 
var box = document.createElement("div"); 
 
document.body.appendChild(box); 
 

 
form.addEventListener("submit", function() { 
 
    var width = form.elements["width"].value, 
 
    height = form.elements["height"].value; 
 

 
    box.style.width = width + "px"; 
 
    box.style.height = height + "px"; 
 
    box.style.border = "1px solid red"; // for demo visibility purposes 
 
    return false; 
 
});

<form action="" id="theForm"> 
 
    <label for="width">Box Width:</label> 
 
    <input type="text" id="width" name="width"> 
 

 
    <label for="height">Box Height:</label> 
 
    <input type="text" id="height" name="height"> 
 

 
    <input type="submit" value="Create Box" id="submit-btn"> 
 
</form>