How do I render values of input elements into a div correctly?

JavaScript
1

I’m trying to grab an input value with javascript and render it into a div element. What do I do to make it work? I’m using querySeclector to grab the input value.

HTML

<body>
    <div id="container">
        <div id="values">
            <input id="firstinput" type="text" placeholder="Enter 2 positive figures">
            <button id="submit">Submit</button>
        </div>
        <div id="result"></div>
    </div>

<script src="script.js"></script>
</body>

JAVASCRIPT

let submitButton = document.querySelector("#submit"),
showResult = document.getElementById("result").innerHTML,
weightsForLeftAndRightSides = document.querySelector("#firstinput").value;

submitButton.addEventListener("click", weightBalancer);

function weightBalancer() {
    showResult = weightsForLeftAndRightSides;
    console.log(weightsForLeftAndRightSides);
}

Thank you.

2

to get the value of the input box use getElementById().value

You also want to get and display the results after you click so you want your code to be inside the weightBalancer() call back function, so I’d try something like this

let submitButton = document.querySelector("#submit")

submitButton.addEventListener("click", weightBalancer);

function weightBalancer() {
    const weightsForLeftAndRightSides = document.getElementById("firstinput").value;
    document.getElementById("result").innerHTML = weightsForLeftAndRightSides;
}
3

Thank you. It worked.