How to style results made with Javascript?

Question

I decided to make an easy program that involved html, css and javascript. This program multiplies and divides 2 random numbers. What I’m in doubt about is how to show the result with the same CSS. For example, stay with the blue background and the results appear instead of the inputs (which are centralized)

<h1>Multiplicando e Dividindo</h1>

    <form id="formulario-calculo">
        <fieldset id="qual-valor1"> 
                <label for="valor1">Digite o primeiro número</label>
                <input id="valor1" name="valor1" type="text" required>
        </fieldset> 
        <fieldset id="qual-valor2">   
                <label for="valor2">Digite o segundo número</label>
                <input id="valor2" name="valor2" type="text"required>
        </fieldset> 
        <button type="submit" id="botao-calcular"><strong>Calcular</strong></button>
    </form>

    <script>
    var botaoCalcular = document.querySelector("#botao-calcular");
    botaoCalcular.addEventListener("click", function(event) {
        event.preventDefault();

        var form = document.querySelector("#formulario-calculo");

        var valor1 = form.valor1.value; 
        var valor2 = form.valor2.value;

        var multiplicacao = (valor1 * valor2);
        var divisao = (valor1 / valor2);

        document.write("Multiplicando os dois valores teremos: " + multiplicacao + "<br>");
        document.write("Dividindo os dois valores teremos: " + divisao);
    })
    </script>
</body>
</html>

CSS

* {
padding:0;
margin:0;
vertical-align:baseline;
list-style:none;
}

fieldset {
    border:none;
}

body {
    width: 100%;
    background-color: darkblue;
    color: #69F;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

h1 {
    color: #fff;
    font-size: 30px;
    margin: 30px; 
}

#valor1, #valor2 {
    width: 100px;
    border-radius: 30px;
    margin-bottom: 20px;
    margin-left: 46.5%;
    margin-right: 46.5%;
    box-sizing: border-box;
    padding-left: 0.5em;
}   

#botao-calcular {
    width: 150px;
    height: 50px;
    border-radius: 30px;
    margin-top: 20px;
    text-transform: uppercase;
    background-color: lightgreen;
    color: darkblue;
}    

Answer 1

When you return your answer, you use document.writeto write the result. document means the entire document.

What we can do is add a div to display the result.

In HTML, we add a div <div id="resultado"></div> just below the </fieldset>.

In JS, we changed the document.write by the div we just created, with document.getElementById('resultado'). We also need to change the write for innerHTML, since we are inside a div. This changes a little how to write the code:

document.getElementById('resultado').innerHTML = 
"Multiplicando os dois valores teremos: " + multiplicacao + "<br> 
Dividindo os dois valores teremos: " + divisao;

I put it all together because I didn’t have to share :)

See the example in https://codepen.io/mapreuss/pen/vPXYGx

Answer 2

What happens there is that you overwrite every HTML page with Document.write, so it loses CSS formatting, there are many ways to do what it wants, one of them is to hide the form and show the result in its place:

var botaoCalcular = document.querySelector("#botao-calcular");
var formulario = document.getElementById("#formulario-calculo");
var mostraResult = document.getElementById("resultado");

botaoCalcular.addEventListener("click", function(event) {
  event.preventDefault();

  var form = document.querySelector("#formulario-calculo");

  var valor1 = form.valor1.value;
  var valor2 = form.valor2.value;

  var multiplicacao = (valor1 * valor2);
  var divisao = (valor1 / valor2);
  
  form.style.display = "none";
  resultado.style.display = "inline-block";

  resultado.innerHTML = `
    Multiplicando os dois valores teremos: ${multiplicacao} <br><br>
    Dividindo os dois valores teremos: ${divisao}
  `;
})

* {
  padding: 0;
  margin: 0;
  vertical-align: baseline;
  list-style: none;
}

fieldset {
  border: none;
}

body {
  width: 100%;
  background-color: darkblue;
  color: #69F;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

h1 {
  color: #fff;
  font-size: 30px;
  margin: 30px;
}

#valor1,
#valor2 {
  width: 100px;
  border-radius: 30px;
  margin-bottom: 20px;
  margin-left: 46.5%;
  margin-right: 46.5%;
  box-sizing: border-box;
  padding-left: 0.5em;
}

#botao-calcular {
  width: 150px;
  height: 50px;
  border-radius: 30px;
  margin-top: 20px;
  text-transform: uppercase;
  background-color: lightgreen;
  color: darkblue;
}

#resultado {
  display: none;
}

<h1>Multiplicando e Dividindo</h1>

<form id="formulario-calculo">
  <fieldset id="qual-valor1">
    <label for="valor1">Digite o primeiro número</label>
    <input id="valor1" name="valor1" type="text" required>
  </fieldset>
  <fieldset id="qual-valor2">
    <label for="valor2">Digite o segundo número</label>
    <input id="valor2" name="valor2" type="text" required>
  </fieldset>
  <button type="submit" id="botao-calcular"><strong>Calcular</strong></button>
</form>

<div id="resultado"></div>

Answer 3

Add style line after writing document.

document.write("Multiplicando os dois valores teremos: " + multiplicacao + "<br>Dividindo os dois valores teremos: " + divisao);
document.body.style.background = "darkblue"

hope it helps

https://www.w3schools.com/jsref/dom_obj_style.asp