How to change innerHTML without refresh or refresh and output with same button in javascript

Question

I am trying to create a random phrase generator with words. My problem is to get a new phrase I have to refresh the page first and then it creates a new phrase. I want it to generate phrase without refreshing whole page or at least generate and refresh with same button here is my code.

var output = "hai " + randomBodyPart + " come un "  + randomWord + " " + randomAdjective + "!";

//Pagereloder
            function myFunction() {
                location.reload();
            }

//Genretor Button
          var button = document.querySelector("button");
          button.addEventListener("click", function() {
                (document.getElementById("viewer").innerHTML= output);
          });

and here is HTML

<article>
                <header>
                    <h1>Random word Genretor</h1>
                    <p class="gen-button"><button class="btn">Click me</button><button class="btn" onclick="myFunction()">Relod</button></p>
                    <h2 id="viewer">Here</h2>
                </header>

If the phrases are loaded in javascript, you can just pick a random number in an array that has them, or if you're loading them externally...same thing, but via ajax. — Waxi
– Waxi, Commented Jul 6, 2015 at 19:15
where code for random... variables? Why you don't using AJAX? — Sergey Maksimenko
– Sergey Maksimenko, Commented Jul 6, 2015 at 19:15

Lucas Tettamanti · Accepted Answer · 2015-07-06 19:38:52Z

<button id="myButton">Click to change the number</button>
<span id="randomNumber"></span>
<script type="text/javascript">
    (function(d) {
        var button = d.getElementById("myButton");
        var textNumber = d.getElementById("randomNumber");
        button.addEventListener("click", function(evt) {
            textNumber.innerHTML = _randomNumber();
        });

        var _randomNumber = function() {
            return Math.floor((Math.random() * 10) + 1);
        }
    })(document);
</script>

Create the button and the container for the random text.
Capture both elements.
Add a listener to the button.
When someone click the button you want to change the innerHtml, so, do it in the callback.
I change the innerHtml with random numbers... its an example right =)
The param evt its there because if you want to do something else with the event, you can erase that if you want.
I give you a Bunny too:
(|_/)
( #.*)
c(")(")
ENJOY!

Kriggs · Accepted Answer · 2015-07-06 19:15:31Z

0

Throw your code into a function and make the button call that function:

            function myFunction() {
                var output = "hai " + randomBodyPart + " come un "  + randomWord + " " + randomAdjective + "!";
                document.getElementById("viewer").innerHTML= output
            }

//Genretor Button
          var button = document.querySelector("button");
          button.addEventListener("click", function() {
                myFunction();
          });

Also, the random generators must be inside thy function also.

answered Jul 6, 2015 at 19:15

Kriggs

3,7761 gold badge19 silver badges24 bronze badges

3 Comments

Amrinder Singh Over a year ago

Pardon, My mistake I have just read your last line about genreators inside the function it's working. Thank you Sir.

Kriggs Over a year ago

@AmrinderSingh Feel free to mark this as answered, it's just below the down arrow in this answer. Also, I'm far from beeing a Sir.

Kriggs Over a year ago

If anybody that downvote the answer could tell me why it would help me improve them, I always try to keep the explanation and solution as succinct as possible.

Collectives™ on Stack Overflow

How to change innerHTML without refresh or refresh and output with same button in javascript

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related