Changing div properties with javascript script-CodePudding

<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style>
            body {  
                margin: 0;
                background: #595959;
                height: 100%;
                overflow-x: hidden;
            }
            #output {
                position: absolute;
                font: small-caps bold 24px/1 sans-serif;
                background: white;
                border: solid 2px black;
            }
            #button_1 {
                position: absolute;
                top: 3vh; 
                left: 62vw;
            }
            #button_2 {
                position: absolute;
                top: 3vh; 
                left: 69.7vw;
            }
            #height_representation_floors {
                position: absolute;
                top: 20vh;
                height: 1100px;
                width: 500px;
                background-image: url(images/height_representation.png);
            }
            #height_representation_stickman {
                position: absolute;

            }
        </style>
        <script>

            function calculus_meters() {

                height_floor = 0

                height_input_code_meters = document.getElementById("height_input").value

                height_floor = height_input_code_meters / 2.7

                document.getElementById("height_representation_floors").setAttribute("style","height: height_floor ");

                document.getElementById("output").textContent = height_input_code_meters   ' meters of height is approximately '   height_floor.toFixed(0)   ' floors of a regular living building'

            }
            function calculus_feet() {

                height_floor = 0

                height_input_code_feet = document.getElementById("height_input").value

                height_floor = height_input_code_feet / 8.86

                document.getElementById("output").textContent = height_input_code_feet   ' feet of height is approximately '   height_floor.toFixed(0)   ' floors of a regular living building'

            }

        </script>
    </head>
<body>
<div id="house_2">

    <div id="output" style="height: 5vh; width: 60vw; margin: 2vw; ">
    </div>

    <h1 style="position: absolute; left: 2vw; top: 8vh; text-align: left; font: small-caps bold 24px/1 sans-serif;"> Input wanted height: </h1>

    <input type="number" step="any" id="height_input" style="position: absolute; margin: 2vw; top: 8vh; text-align: left; width: 60vw; height: 5vh; font-size: 2vw; border: solid 2px black;">

    <div id="button_1">
    <button type="button" onClick="calculus_meters()" style="width: 14.6vh; height: 14.6vh; border: solid 2px black; font-size: 1.5vw">Convert (in meters)</button>
    </div>

    <div id="button_2">
    <button type="button" onClick="calculus_feet()" style="width: 14.6vh; height: 14.6vh; border: solid 2px black; font-size: 1.5vw">Convert (in feet)</button>
    </div>

    <div id="height_representation_floors">
    </div>
</div>
</body>
</html>

I wanted to make div height change with input so it can represent floors.

I dont really understand how to make a script variable represent an actual value, beacuse if i set

document.getElementById("height_representation_floors").setAttribute("style","height: height_floor ");

to change to 500px or so it works just as intended. What can i do?

CodePudding user response：

You should use template literals to concatenate the variable into the string:

document.getElementById("height_representation_floors").setAttribute("style", height: `${height_floor}px`);

This will correctly insert the value of the variable height_floor into the string, so that the div's height will change based on the input value.

CodePudding user response：

The issue with your code is that you are setting the "height" style attribute to the string "height_floor" instead of the value of the variable height_floor. To set the height of the div to the value of the height_floor variable, you should change the line of code to:

document.getElementById("height_representation_floors").setAttribute("style", "height: "   height_floor   "px;");

This will set the "style" attribute of the div to a string that includes the value of the height_floor variable followed by "px" to specify that the value is in pixels.