Using document.write removes all other text and displays only the message

Question

I just have a question about how I would make it so that there is a button in one column and when you click the button, text appears in another column. My overall goal is to make a simple clicker.

Here is my code:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Clicker</title>
        <meta name="generator" content="BBEdit 11.6" />
    </head>
    <body>
        <table width=600>
            <tr>
                <td width=300><span><font size=24px><button onclick='onClick()'>
                    click me
                    </button></span></td>
                <td sidth=300><span><font size=24px>So does this</span></td>
            </tr>
        </table>
    <script>
        clicks = 0;

            function onClick () {
                clicks = (clicks + 1);
                document.write ("you have clicked the button ")
                document.write (clicks)
                document.write (" times")
            };

        </script>
    </body>
</html>

I have what I need to make it so that you get a message when you click the button, but when I do, all the other text dissipears and I get just that message. Tell me if it was a really stupid mistake or not please. I need to know.

Possible duplicate of [document.write clears page](https://stackoverflow.com/questions/10873942/document-write-clears-page) — Sebastian Simon, Aug 22 '17 at 18:39
If you’re using a tutorial that teaches you to use `` and `document.write`, _leave that tutorial immediately_. — Sebastian Simon, Aug 22 '17 at 18:43

joopmicroop · Answer 1 · 2017-08-22T19:20:33.967

0

With peace and love for a confusing question.

<button onclick="a='textContent';t[a]=t[a].replace(/\d+/,++this[a])">0</button><p id=t>Total:0

edited Aug 22 '17 at 19:20

answered Aug 22 '17 at 18:49

joopmicroop

891
5
15

score 0 · Answer 2 · answered Aug 22 '17 at 18:49

Create an annonymous function when you click the button and call the counting() function. This will increase the value of the variable countingClicks and then set the innerText of the element in the other column to that variable.

var x = document.getElementById("counter");
var y = document.getElementById("display");
var countingClicks = 0;

function counting() { 
  countingClicks++;
  y.innerText ="Number of times clicked: " + countingClicks;
}

//When the counter button is clicked call counting
x.onclick = function(){
 counting()
}

.container{
  width: 600px;
  box-sizing: border-box;
}

.row{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.six{
  width: 48.33%;
  text-align: center;
  border: 1px solid black;
}

<div class="container">
  <div class="row">
    <div class="six">
      <button id="counter">Counter</button>
    </div>
    <div class="six">
      <span id="display"></span>
    </div>
  </div>
</div>

score 0 · Accepted Answer · answered Aug 22 '17 at 18:54

0

To show the count of clicks in the page, and keep your html, a simple way to achieve that is adding a div and manipulate only its content with getElementById (to get the element) and then call innerHTML (to change the content of an HTML element).

Add this bellow your html table:

<div>
  <h1 id=click-event> </h1>   
</div>

And change your onClick():

function onClick () {
  clicks = (clicks + 1);
  document.getElementById("click-event").innerHTML = "you have clicked the button " + clicks + " times";
};

answered Aug 22 '17 at 18:54

Alejandro Montilla

2,626
3
31
35

THANK YOU SOOOOOOO MUCH MY FRIEND! – popbot1 Aug 22 '17 at 20:04
My mistake was really dumb. – popbot1 Aug 22 '17 at 20:10
I'm glad that it was helpful – Alejandro Montilla Aug 22 '17 at 20:25

Using document.write removes all other text and displays only the message

3 Answers3