How do I delete document.write() out of my calculator

Question

How do I make this calculator display the result on the first page after the ='s sign without destroying all of the html on the page with document.write()?

I know that document.write() is the problem, but I don't know of anything else to use. I'm very new to coding, so any help is greatly appreciated.

I also have a problem with the division part because it is putting the result right next to the remainder, however, once the document.write() problem is resolved, I think that the solution should become more apparent. Thank You!


  
  java



  Addition
  
     +
    
    
  
  
    Subtraction
    

       -
      
      

      
Multiplication
        

           *
          
          
        
        Division
          

             ÷

user_12701949 · Answer

You can either use textContent or innerHTML.

Here's an example using textContent:

function add() {
  var input1 = parseInt(document.getElementById("t1").value);
  var input2 = parseInt(document.getElementById("t2").value);
  var result = input1 + input2;
  document.getElementById('add-result').textContent = result;
}

function divide() {
  var input1 = parseInt(document.getElementById("t3").value);
  var input2 = parseInt(document.getElementById("t4").value);
  var result = Math.floor(input1 / input2);
  var remainder = input1 % input2
  document.getElementById('divide-result').textContent = result;
  document.getElementById('divide-remainder').textContent = remainder;
}

function multiply() {
  var input1 = parseInt(document.getElementById("t5").value);
  var input2 = parseInt(document.getElementById("t6").value);
  var result = input1 * input2;
  document.getElementById('multiply-result').textContent = result;
}

function subtract() {
  var input1 = parseInt(document.getElementById("t7").value);
  var input2 = parseInt(document.getElementById("t8").value);
  var result = input1 - input2;
  document.getElementById('subtract-result').textContent = result;
}


  Addition
   +
  
  
  


  Subtraction
   -
  
  
  


  Multiplication
   *
  
  
  


  Division
   ÷
  
  
   |

With textContent you can only set text, with innerHTML you can set HTML:

function add() {
  var input1 = parseInt(document.getElementById("t1").value);
  var input2 = parseInt(document.getElementById("t2").value);
  var result = input1 + input2;
  document.getElementById('add-result').innerHTML = `${result}`;
}

function divide() {
  var input1 = parseInt(document.getElementById("t3").value);
  var input2 = parseInt(document.getElementById("t4").value);
  var result = Math.floor(input1 / input2);
  var remainder = input1 % input2
  document.getElementById('divide-result').innerHTML = `${result}`;
  document.getElementById('divide-remainder').innerHTML = `${remainder}`;
}

function multiply() {
  var input1 = parseInt(document.getElementById("t5").value);
  var input2 = parseInt(document.getElementById("t6").value);
  var result = input1 * input2;
  document.getElementById('multiply-result').innerHTML = `${result}`;
}

function subtract() {
  var input1 = parseInt(document.getElementById("t7").value);
  var input2 = parseInt(document.getElementById("t8").value);
  var result = input1 - input2;
  document.getElementById('subtract-result').innerHTML = `${result}`;
}


  Addition
   +
  
  
  


  Subtraction
   -
  
  
  


  Multiplication
   *
  
  
  


  Division
   ÷
  
  
   |

It's worth noting, with innerHTML there are security concerns as mentioned here:

...there are ways to execute JavaScript without using elements, so there is still a security risk whenever you use innerHTML to set strings over which you have no control. For example:

const name = "";
el.innerHTML = name; // shows the alert

For that reason, it is recommended that you do not use innerHTML when inserting plain text; instead, use Node.textContent. This doesn't parse the passed content as HTML, but instead inserts it as raw text.

Here are some other methods used to manipulate the DOM:

See the full list here.

user_4897779 · Answer

As you have discovered, document.write() is tricky because it has a tendency to overwrite the existing content when used. Let's see what the documentation has to say about it:

Note: Because document.write() writes to the document stream, calling document.write() on a closed (loaded) document automatically calls document.open(), which will clear the document.

Hmm, well what else can we do? Fortunately, it is possible to target specific parts of the page and replace content in those elements only. So, for example we could add elements with ids like #add-result, #div-result etc to the page which will contain the results of their respective action. Then, instead of using document.write() to output the results, we can replace the content in those elements.

Let's add a to contain our add result:

      Addition
             +
            
            
            Docs
Then, we can easily change the content inside of that element by updating the element.textContent property, just like you would a variable:
    function add(){
        var input1 = parseInt(document.getElementById("t1").value);
        var input2 = parseInt(document.getElementById("t2").value);
        var result = input1+input2;
        
        // get the element with the #add-result ID
        var element = document.querySelector("#add-result");

        // update the content in that element
        element.textContent = result;
    }

Now when you add two numbers together and press =, the result will appear inside of the  element instead of overwriting the entire page. See if you can get it working for the other inputs as well. Remember you will need a unique id for each element you want to display a result in, and update the calculation functions accordingly!

How do I delete document.write() out of my calculator

2 Answers