2021-12-15

Tech Programing

程式人小天地

Create a square from user inputs

1 min read


I am attempting to create a square from user inputs.

I thought that having having the height and width in my style multiplied together would create the square after clicking my button.

My question is: How do I get the user inputs to be used for the height and width of the box?

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

Style

 background: red;
  width: (h*w);
  height: (w*h);
  margin: 50px auto;
}



Source link

資料來源:Stackoverflow

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *