alert does not get triggered in javascript

Question

I am trying to do a basic password matching on button click. Below is the input and the button and the script. All i want to do is on button click check if the password = test123. If yes then show a alert and then hide the div.

When i click the button nothing happens. I know that the script is being executed. if i change alert(document.getElementById('passbox1').value); to alert("starting"); i see the alert.

<div id="passdiv">
        <input name="passbox1" type="password" /> &nbsp;&nbsp;<input name="submit" onclick="showDiv()" type="button" value="Submit" /></div>

<div id="list">testing</div>

<script>
function showDiv() { 
    alert(document.getElementById('passbox1').value);
    if( document.getElementById('passbox1').value == "test123") {
        alert("match");
        document.getElementById('passdiv').hidden = true;
        document.getElementById('list').hidden = false;
    } else {
         alert("Password is incorrect.");
    }

}
</script>

Where is the code for your button and input boxes? At first glance, there is no property `hidden` on DOM elements. You might want to use `document.getElementById(...).style.display = 'none'` instead. — arcyqwerty, Feb 22 '16 at 23:19
If your code is like you've posted here, it will throw an error because there is no element with id 'passbox1' and so it cannot read property value of null — baao, Feb 22 '16 at 23:21
@codeNinja : can you post your complete HTML code as well along with your JS ? — stark, Feb 22 '16 at 23:21
*"if i change alert(document.getElementById('passbox1').value); to alert("starting"); i see the alert."* - Which implies that you are getting an error from `document.getElementById('passbox1').value`, with the most likely error being that no element exists with that id. — nnnnnn, Feb 22 '16 at 23:25
A quick glance at your profile suggests that you've been programming in JavaScript for at least 2 years. Although this should have happened on day one, now is the high time to stop debugging with alert and learn how to use the JS console: http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers — JJJ, Feb 22 '16 at 23:32

stark · Answer 1 · 2016-02-23T19:43:38.907

0

Assuming that you've defined the passbox1 div in your HTML,try the below snippet , additionally, you should be declaring your function showDiv() before you are actually calling it.

<script>
  function showDiv() {
    alert(document.getElementById('passbox1').value);
    if (document.getElementById('passbox1').value == "test123") {
      alert("match");
      document.getElementById('passdiv').style.visibility = "hidden";
      document.getElementById('list').style.visibility = "visible";
    } else {
      alert("Password is incorrect.");
    }

  }
</script>
<div id="passdiv">
  <input name="passbox1" type="password" id="passbox1" />&nbsp;&nbsp;
  <input name="submit" onclick="showDiv()" type="button" value="Submit" />
</div>

<div id="list">testing</div>

edited Feb 23 '16 at 19:43

answered Feb 22 '16 at 23:22

stark

2,246
2
23
35

@downvoters : your comments help. – stark Feb 22 '16 at 23:26
2

Did not downvote, but seems like "we don't like the question" so "we don't like you answering". On a technical level, `hidden` still doesn't exist as a property for DOM elements so it won't hide/show correctly. – arcyqwerty Feb 22 '16 at 23:29
@arcyqwerty : Sure, I wasn't aware that incomplete questions shouldn't be answered, I just assumed he had the correct HTML , hence I based my answer on that premise. I'd be happy to delete my answer if that's the case. – stark Feb 22 '16 at 23:31
2

I don't see a problem with answering a low quality question. I also don't see a problem with not-answering such a question. However, I don't think it's fair to downvote valid answers to bad questions based on the information available. It's one thing to downvote the question because it's low quality and another thing to penalize an answerer for answering the question asked. That's just my 2c though and some people clearly disagree. This discussion is more appropriate in meta.stackoverflow.com if it hasn't already been answered there. – arcyqwerty Feb 23 '16 at 02:06
1

@arcyqwerty : I agree, I've changed my code as well. I didn't realize earlier that hidden does not exist as a property for DOM elements, I've since used the style.visibility property in my answer to hide and show divs, thanks for pointing that out. – stark Feb 23 '16 at 19:44

score 0 · Answer 2 · answered Feb 22 '16 at 23:26

You have a couple issues, see fiddle: https://jsfiddle.net/vctbszc2/2/

You cannot get a value of a div that has no value :)

To fix either add a input field with a value or use innerHTML like this: alert(document.getElementById('list').innerHTML);

<body onload="showDiv()">
<div id="list">testing</div>
</body>
<script>
function showDiv() { 
    alert(document.getElementById('list').innerHTML);
    //innerHTML will get text inside list
    //Also .getElementById() was not targeting an ID in your example
    if( document.getElementById('list').value == "test123") {
        alert("match");
        document.getElementById('passdiv').hidden = true;
        document.getElementById('list').hidden = false;
    } else {
         alert("Password is incorrect.");
    }

}
</script>

score 0 · Accepted Answer · edited May 23 '17 at 12:33

Try my to run this code if its work:

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<input type="text" id="passbox1">
<button onclick="showDiv()">Check</button>
<div id="list">testing</div>
<div id="passdiv" style="display:none;">PassDIV</div>

<script>
function showDiv() { 
    alert(document.getElementById('passbox1').value);
    if( document.getElementById('passbox1').value == "test123") {
        alert("match");
        document.getElementById('passdiv').style.display ="block";
        document.getElementById('list').style.display = "none";
    } else {
         alert("Password is incorrect.");
    }

}
</script>
</body>
</html>

Explanation: You can not use element.hidden to hide element but instead element.style.display. Read the answer here : Show/hide 'div' using JavaScript

alert does not get triggered in javascript

3 Answers3