the page keeps on reloading when i press the onclick button-CodePudding

i cant figure out how to stop the page reloading when i press the on click button... please if anyone can help tell me:)

(this is in html)

<button on click="My Function()">Try it</button>
<script>
function My Function() {
  var x = document.get_Element_By_Id("mountain_bikes");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

</script>

<script>
document.get_Element_)By_Id("mountain_bikes").style.display = "none";

i thought that this would show and hide when i toggle try it but it reloads the page every time i toggle please help!!

CodePudding user response：

It looks like you've got a few errors going on here. Here's the answer:

// My Function() to myFunction()
function myFunction() {
  // get_Element_By_Id to getElementById
  var x = document.getElementById("mountain_bikes")
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

// get_Element_)By_Id to getElementById
document.getElementById("mountain_bikes").style.display = "none"

<!-- My Function() to myFunction() -->
<!-- on click to onclick —>
<!-- optionally add type="button" -->
<button type="button" onclick="myFunction()">Try it</button>

<!-- Added for demo -->
<div id="mountain_bikes">
  My super cool mountain bikes.
</div>

As stated in a previous answer, it's just typos, but more than was mentioned. I'm sure you're still learning the basics, but this is something you should watch tutorials on, and maybe look at other people's code to get a better understanding of how JavaScript works. Your code works fine, without the typos, but this is something that's easily fixed by pasting the code into CodePen, or just running console.log() on your variables.

For future reference, you should also know about the preventDefault() function, that can be run on an event, like onClick. This is really only important in the case of forms, but if you run into other issues this may help. If you have a button in a form, but you don't want it to submit, make sure you include type="button" though. Here's how the preventDefault() function works:

// Setting constant variables since they never change.
// Using querySelector() for simplicity.
const article = document.querySelector('article'),
      button = document.querySelector('button')
      
// Rather than using an onclick on the button in the HTML, I'm using an event listener to listen for the click event in JavaScript.
// This is the same thing as we had before, it just looks a little different.
button.addEventListener('click', (e) => { // Notice the e parameter. This is our event.

  // This prevents the default behavior of our click event
  e.preventDefault()
  
  // This is the same as the if statement, just as a terny operator.
  article.style.display === 'none'
  ?
  article.style.display = 'block'
  :
  article.style.display = 'none'
  
})

// No need to set the style to none to start, since that's put in the HTML

<button type="submit">Click Me</button>

<!-- Here we set the display to none, so we don't have to do it in the JavaScript to start -->
<article style="display: none;">

  <p>Without the preventDefault() function, the button would submit to the form—or at least try to, since there is no form—which would change the query in URL.</p>
  
  <p>This could potentionally refresh the page, as is happening in your case.</p> 
  
</article>

CodePudding user response：

In your tag, the onclick needs to be one word, like this:

<button onclick="myFunction()">Try It</button>

Also, you shouldn't have spaces in your function names, I'm not a JS first guy, but I'm pretty sure no language allows for that (that I know of at least!)