Why does my javascript var value keep reseting?

Question

I have navigation with 3 links.

When i click each link i want it to hide other elements and display itself.

After i click on my link it does what its supposed to do but it resets and shows everything after few seconds.

Heres link to code pen just so you can see what keeps happening.

https://codepen.io/necapereca/pen/zRwZbz

function show(choice){
  var user=choice;

  if ( user == 1) {
        document.getElementById('one').style = "display:block";
        document.getElementById('two').style ="display:none";
        document.getElementById('three').style ="display:none";
      }

      else if ( user == 2) {
        document.getElementById('one').style = "display:none";
        document.getElementById('two').style ="display:block";
        document.getElementById('three').style ="display:none";
      }

      else if ( user == 3) {
        document.getElementById('one').style = "display:none";
        document.getElementById('two').style ="display:none";
        document.getElementById('three').style ="display:block";
      }    
}

You used a `` tag, so the page is reloading. Don't use `` when what you want is just something clickable to trigger JavaScript; use ` — Pointy, Feb 11 '18 at 16:22
Just make `href=""` as `href="#"` and retrun false at the end of the function — Sully, Feb 11 '18 at 16:25
@neca I [modified your example in my answer](https://stackoverflow.com/a/48733673/344029) to use a `button` instead which avoids the problem completely. I also improved a few things to keep everything really simple. — DJDaveMark, Feb 11 '18 at 21:45

score 1 · Accepted Answer · answered Feb 11 '18 at 16:33

You var is not resetting, actually the page is reloading. You can avoid that in many different ways:

event.preventDefault()

Pass the event global variable to your click function and call event.preventDefault(), this is going to stop the default behavior of clicking a link.

function show(event, choice){
  event.preventDefault();
  var user=choice;
  
  if ( user == 1) {
        document.getElementById('one').style = "display:block";
        document.getElementById('two').style ="display:none";
        document.getElementById('three').style ="display:none";
      }
  
      else if ( user == 2) {
        document.getElementById('one').style = "display:none";
        document.getElementById('two').style ="display:block";
        document.getElementById('three').style ="display:none";
      }
  
      else if ( user == 3) {
        document.getElementById('one').style = "display:none";
        document.getElementById('two').style ="display:none";
        document.getElementById('three').style ="display:block";
      }    
}

.div1{
  background-color:red;
  width: 150px;
  height: 100px;
}
.div2{
  background-color:blue;
  width: 150px;
  height: 100px;
}
.div3{
  background-color:green;
  width: 150px;
  height: 100px;
}

<a class="nav-link" href="" onclick="show(event, 1)">HOME</a>
<a class="nav-link" href="" onclick="show(event, 2)">ABOUT ME</a>       
<a class="nav-link" href="" onclick="show(event,3)">CONTACT</a>
<div class="div1" id="one"></div>
<div class="div2" id="two"></div>
<div class="div3" id="three"></div>

add a #hash link on your `a` tag

This will navigate to #one but it will not reload the page.

<a href="#one">

change your `a` tag to a `button` tag

Buttons don't navigate away from the page by default.

WilomGfx · Answer 2 · 2018-02-11T16:26:59.523

0

You must give your href an hash, else you'll navigate to a said url. If no url provided it will refresh the current url which is what is happening. Just add something like #(something). See below ! Or use a button instead of an a tag

<a class="nav-link" href="#1" onclick="show(1)">HOME</a>
<a class="nav-link" href="#2" onclick="show(2)">ABOUT ME</a>       
<a class="nav-link" href="#3" onclick="show(3)">CONTACT</a>
<div class="div1" id="one"></div>
<div class="div2" id="two"></div>
<div class="div3" id="three"></div>

Working forked pen https://codepen.io/wilomgfx/pen/vdmmKP

edited Feb 11 '18 at 16:26

answered Feb 11 '18 at 16:24

WilomGfx

1,868
1
18
26

Using a hash (`#`) will work, but instead of that the default behaviour of the event should be prevented. Using a hash might result in nwanted scrolls to the top or to an element with that ` id` . – t.niese Feb 11 '18 at 16:26

DJDaveMark · Answer 3 · 2018-02-11T21:41:07.197

It's your html. The href needs either a hash:

<a class="nav-link" href="#" onclick="show(1)">HOME</a>

Or put:

  <a class="nav-link" href="javascript:void(0)" onclick="show(1)">HOME</a>

But the best thing to do is avoid the problem and use a stylised <button> tag instead:

var divs = ["one", "two", "three"];
divs.forEach(function(id){
    document.getElementById('btn-'+id).onclick = function() {
        show(id);
    };
});

function show(id){
    divs.forEach(function(id){
        document.getElementById(id).style = "display:none";
    });
                 
    document.getElementById(id).style = "display:block";
}

.div {
  width: 150px;
  height: 100px;
}

.div1 {  background-color:red; }
.div2 {  background-color:blue; }
.div3 {  background-color:green; }

button.link {
    display:inline-block;
    position:relative;
    background-color: transparent;
    cursor: pointer;
    border:0;
    padding:0;
    color:#00f;
    text-decoration:underline;
    font: inherit;
}

<button class="link" id="btn-one">HOME</button>
<button class="link" id="btn-two">ABOUT ME</button>       
<button class="link" id="btn-three">CONTACT</button>
<div class="div div1" id="one"></div>
<div class="div div2" id="two"></div>
<div class="div div3" id="three"></div>

Run the code snippet to see it in action, and here's the code in an updated pen.

I used a simple way to attach click events without jQuery.
When you click a 'link', all divs are hidden then the correct one is shown.
I also simplified the CSS

score 0 · Answer 4 · answered Feb 11 '18 at 16:27

This is because you have href="" on your link and therefore navigation occurs. One of the solutions will be to return false from your function and tweak HTML to onclick="return show..".

See complete HTML

<a class="nav-link" href="" onclick="return show(1)">HOME</a>
<a class="nav-link" href="" onclick="return show(2)">ABOUT ME</a>       
<a class="nav-link" href="" onclick="return show(3)">CONTACT</a>
<div class="div1" id="one"></div>
<div class="div2" id="two"></div>
<div class="div3" id="three"></div>

and Javascript

function show(choice){
  var user=choice;

  if ( user == 1) {
        document.getElementById('one').style = "display:block";
        document.getElementById('two').style ="display:none";
        document.getElementById('three').style ="display:none";
      }

      else if ( user == 2) {
        document.getElementById('one').style = "display:none";
        document.getElementById('two').style ="display:block";
        document.getElementById('three').style ="display:none";
      }

      else if ( user == 3) {
        document.getElementById('one').style = "display:none";
        document.getElementById('two').style ="display:none";
        document.getElementById('three').style ="display:block";
      }    

  return false;
}

Another solution will be to simply remove href="" from your links, but you will lose their 'link' styling.

score 0 · Answer 5 · answered Feb 11 '18 at 16:32

0

Just remove the empty href or replace it with href="#!" This will prevent the page from reloading.

answered Feb 11 '18 at 16:32

abedzantout

802
4
15
28

score 0 · Answer 6 · answered Feb 11 '18 at 16:34

It seems like the show function is not the problem but how you are calling it. The right way would be using a button:

<button onclick = "show(1)"> Show 1 </button>

However while that fix is easy, you could greatly reduce your code by looping over your elements. Then you can show it if the elements index matches the index to show, otherwise you can hide it:

 function show(index){
   const ids = ["one", "two", "three"];

   for(let i = 0; i < ids.length; i++)
      document.getElementById(ids[i])
         .style.display = index - 1 === i ? "block" : "none";
}

Why does my javascript var value keep reseting?

6 Answers6

event.preventDefault()

add a #hash link on your a tag

change your a tag to a button tag

add a #hash link on your `a` tag

change your `a` tag to a `button` tag