根据用户输入创建一个正方形

Question

我正试图根据用户输入创建一个正方形。

我想，把我风格中的高度和宽度相乘，可以在点击按钮后创建正方形。

我的问题是：如何获得用于框的高度和宽度的用户输入？

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;
}

Answer 1

使用如下demo:的输入值设置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>