Consecutive onclick events on same button triggering separate scripts

Question

I am learning javascript and started working with using scripts to modify the DOM.

I have a small html file where the user pushes a button and the html changes state. What I am having trouble with is, after the main onclick event, having the same button reset the page to it's original state, i.e. editing the DOM to return to its original mark-up.

This is my file (I know it's simple but it will help me):

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>My First JavaScript</title>

<style type="text/css">
h3#norm {
    font-size: 1.5em;
    color: #000;
}

h3 {
    font-size: 2em;
    color: #0059D7;
}
</style>
</head>

<body>
<!--creating a wrapper to contain and layout the page-->
<div id="wrapper">
<h3 id="norm">Are you new here?</h3>

<!--button for running script-->
<input class="button" type="button" id="button" name="button" value="Yes">

<!--begin javascript to edit html in above line-->
<script type="text/javascript">
<!-- 
//when button is clicked script edits html
document.getElementById('button').onclick = function () {
    document.getElementById('norm').innerHTML="<h3>Welcome!!!</h3>";
};

document.getElementById('button').onclick
//-->
</script>
</div>
</body>
</html>

EDIT ADDED MISSING CSS TO QUESTION

Dan Goodspeed · Accepted Answer · 2015-02-15 06:41:41Z

1

1) Don't put the h3 tag in the javascript innerHTML, as it's repetitive.

2) Learn the ternary operator. Change

document.getElementById('norm').innerHTML="<h3>Welcome!!!</h3>";

to

document.getElementById('norm').innerHTML = (document.getElementById('norm').innerHTML == "Welcome!!!") ? "Are you new here?" : "Welcome!!!";

And that should do it.

answered Feb 15, 2015 at 6:41

Dan Goodspeed

3,6105 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Ricardo Martinez Over a year ago

Dan Goodspeed, thanks for the link. I figured there was an operator for this.

Ricardo Martinez Over a year ago

ps. there is a reason I included the <h3>. It helped to alter the styles of the welcome state. Is there a way to include this into the solution? Change the inner HTML AND the id of the parent <h3> tag?

Ricardo Martinez Over a year ago

So what is happening, if you look at the CSS, the <h3 id="norm"> has different styling than the <h3> tag. Basically the point of the whole exercise was to have the text change in content AND have the styling change. This is why adding the <h3> tag when editing the inner HTML helped, it changed the styling. However, I am wondering if there is a cleaner way of doing this that doesn't use invalid HTML. You could go in and doc.getElementById('norm').id = "blank" to change the styles without bad HTML, but them you have an issue reseting the content as you've lost the "norm" handle.

Ricardo Martinez Over a year ago

just noticed the CSS didn't make it through when I originally posted the question. EDIT: added the CSS, not sure how that didn't make it through

Dan Goodspeed Over a year ago

Ok... it's really bad form to have an <h3> inside of a <h3>. A lot of this would be easier with jQuery... but I guess what would be best for you is to change the inner <h3> to a <span>, and then in your css you can say "h3 span { ... }". If you're interested in jQuery, adding a class to the h3 would be the proper way to do it.

|

mplungjan · Accepted Answer · 2015-02-15 11:09:16Z

0

Not the BEST way, but certainly using the least effort, try something like this:

document.getElementById('button').onclick = function () {

    var test = document.getElementById('norm').innerHTML;
    if (test == "Welcome!!!") {
        document.getElementById('norm').innerHTML="Are You New Here?";
    } else {
        document.getElementById('norm').innerHTML= "Welcome!!!";
    }

};

A neater way would for example be

document.getElementById('button').onclick = function () {
  var norm = document.getElementById('norm'),
      test = "Welcome!!!";
  norm.innerHTML=norm.innerHTML==test?"Are You New Here?":test;
};

edited Feb 15, 2015 at 11:09

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Feb 15, 2015 at 6:39

Beartums

1,3501 gold badge10 silver badges15 bronze badges

8 Comments

mplungjan Over a year ago

Please do not add text more than once. It is a waste.

Beartums Over a year ago

A downvote? Especially since I explained it was probably easiest to understand but NOT best practice? That seems rather uncalled for.

mplungjan Over a year ago

So post your better effort instead of teaching noobs poor practises :)

Beartums Over a year ago

@mplungjan, Sometimes noobs find it easier to understand something that makes the fewest changes to their own code in the most comprehensible way. I agree with your comment and appreciate your input. I would not put a downvote in that situation, but i'm guessing we are not philosophically aligned on that. Best :-)

Beartums Over a year ago

Totally understood. Thanks for taking the time to explain.

|

Collectives™ on Stack Overflow

Consecutive onclick events on same button triggering separate scripts

2 Answers 2

8 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related