1

Hi I'm trying to make a simple zodiac webpage that grabs the answer from an array using a function that has a for loop and an if statement, but the answer when I click the button continues to just flash and disappear. How do I keep the answer on the page? Here's the HTML:

<div class="header"><h1 class="zodiactitle">Learn your Life's Mysteries w/ the </br>ZODIAC</h1></div>
 <form>
  <input id="zodiac" placeholder="   ENTER YOUR ZODIAC">
  <span class="click"><button class="button" onclick="getZodiac()">Click to find out more</button></span>
</form>

<div class="details">
<h3 id="birthdate"></h3>
<h3 id="zodiacsign"></h3>
</div>

Here's the function:

function getZodiac(){
  var sign = document.getElementById("zodiac").value;

  for( i = 0; i < zodiacSigns.length; i++){
  //if statement to match correct input to correct zodiac
  if(sign == zodiacSigns[i].sign){
    document.getElementById("birthdate").innerHTML = zodiacSigns[i].birthdate;
    document.getElementById("zodiacsign").innerHTML = zodiacSigns[i].zodiac;
    return;

   }
  }
}
Regie Tano
  • 29
  • 6
  • Can you post your HTML code? At least the elements "birthdate" and "zodiacsign" please. – Psi Mar 12 '17 at 04:12
  • Where is `getZodiac()` being called? Are a `
    ` and submit button involved? If so, the form may be navigating to its `action` or at least refreshing the current page. [How to prevent form from being submitted?](https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted)
     – Jonathan Lonowski Mar 12 '17 at 04:14
  • Is this python? Where are semicolons! – mehulmpt Mar 12 '17 at 04:17
  • @MehulMohan Though commonly used, [they aren't actually required in JavaScript.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion) – Jonathan Lonowski Mar 12 '17 at 04:17
  • @Jonathan but I'll consider it as an extremely bad practice and a source of so many unknown bugs. Try to use semicolons if possible. – mehulmpt Mar 12 '17 at 04:19
  • Your question has no clue about the variable `zodiacSigns`. Where does it come from? – Imran Mar 12 '17 at 04:20
  • 1
    @MehulMohan In general, I tend to use semicolons as well, but they're absence isn't an outright fault. See "[An Open Letter to JavaScript Leaders Regarding Semicolons](http://blog.izs.me/post/2353458699/an-open-letter-to-javascript-leaders-regarding)" Also, [StandardJS](http://standardjs.com/). – Jonathan Lonowski Mar 12 '17 at 04:21
  • @Jonathan great article. Thanks. – mehulmpt Mar 12 '17 at 04:26
  • I will start using semicolons now for best practices. I put up the html. Thanks guys for the input. Much appreciated. – Regie Tano Mar 12 '17 at 04:40

1 Answers1

1

Hey I think the problem is that when you click the button, your form is being submitted and your page flashes. You can add Event.preventDefault() and Event.stopPropagation() to fix it. I made a demo for more clarity.

function getZodiac(e) {
  e.preventDefault();
  e.stopPropagation();

  // the rest of your logic
}
dawchihliou
  • 246
  • 1
  • 5