CODEWITHSUNDEEP
javascriptfrontend
neca
neca

Reputation: 139

Why does my javascript var value keep reseting?

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";
      }    
}

Upvotes: 0

Views: 75

Answers (6)

DJDaveMark
DJDaveMark

Reputation: 2855

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.

Upvotes: 0

Jonas Wilms
Jonas Wilms

Reputation: 138457

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";
}

Upvotes: 0

BrunoLM
BrunoLM

Reputation: 100371

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.

Upvotes: 1

abedzantout
abedzantout

Reputation: 832

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

Upvotes: 0

Vitalii Chmovzh
Vitalii Chmovzh

Reputation: 2943

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.

Upvotes: 0

WilomGfx
WilomGfx

Reputation: 2013

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

Upvotes: 0

Related Questions