[英]Create a square from user inputs
我正在嘗試根據用戶輸入創建一個正方形。
我認為在我的樣式中將高度和寬度相乘會在單擊我的按鈕后創建正方形。
我的問題是:如何讓用戶輸入用於框的高度和寬度?
HTML:
<input type="text" id="width">
<input type="text" id="height">
<button onclick="calculate()">Click Me For Square</button>
<br>
<p id="box"></p>
Javascript:
function calculate() {
var w = document.getElementById("width").value;
var h = document.getElementById("height").value;
box = document.getElementById("box");
box.innerHTML = " " + (w*h);
}
var square = document.createElement('div');
square.className = 'square';
document.body.appendChild(square);
風格
background: red;
width: (h*w);
height: (w*h);
margin: 50px auto;
}
使用如下演示的輸入值設置square.style.width/height
:
function calculate() { var w = document.getElementById("width").value; var h = document.getElementById("height").value; box = document.getElementById("box"); box.innerHTML = " " + (w*h); document.querySelectorAll('div.square').forEach(item => item.remove()) var square = document.createElement('div'); square.className = 'square'; square.style.width = w + 'px' // width square.style.height = h + 'px' // height document.body.appendChild(square); }
.square { background: red; }
<input type="text" id="width" value="25"> <input type="text" id="height" value="25"> <button onclick="calculate()">Click Me For Square</button> <br> <p id="box"></p>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.