0

the element was hidden by css and i wanted to show after user enter the input value in prompt. I have tried By searching similar example but mine doesn't work.

app.js 

var firstName = prompt('Please enter your first name');
var secondName = prompt('Please enter your second name');
if (firstName && secondName != ' ') {
    var x = document.getElementById('standard');
    x.style.display = "block";
} else {
    alert('please enter first and second name');
}

tut.html

<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="app.js"></script>
</head>

<body>
    <h1 id="heading">Heading</h1>
    <div id="standard"> <input type="radio" name="standard">1 <input type="radio" name="standard">2 </div>
</body>

</html>
m87
  • 4,445
  • 3
  • 16
  • 31
srs
  • 35
  • 1
  • 5

4 Answers4

2

Include your script file below. The Problem is Script loaded before the DOM. Your Solution is here.

<html>
   <head>
      <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
      <h1 id="heading">Heading</h1>
      <div id="standard">
         <input type="radio" name="standard">1
         <input type="radio" name="standard">2
      </div>
      <script type="text/javascript" src="app.js"></script> 
   </body>
</html>
Aravinthan K
  • 1,763
  • 2
  • 19
  • 22
1

Your Javascript code looks good to me. The only thing that looks a bit faulty is the if statement, but it should have triggered it anyway. Does this test work for you?

    var firstName = prompt('Please enter your first name');
    var secondName = prompt('Please enter your second name');
    
    if (firstName != '' && secondName != ''){
      var x = document.getElementById('standard');
      x.style.display = "block";
    }
    else{
      alert('please enter first and second name');
    }
#standard { display: none; }
<html>
<head></head>

<body>
<h1 id="heading">Heading</h1>
<div id="standard">
<input type="radio" name="standard">1
<input type="radio" name="standard">2
</div>
</body>
</html>

Now, your real problem is that the HTML/DOM element is not loaded when you try to unhide it. You can verify by checking the Chrome console and you'd see some error saying you can't set the property style of undefined.

To fix it, you have two options:

1) Place the app.js at the end of the body.

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<h1 id="heading">Heading</h1>
<div id="standard">
<input type="radio" name="standard">1
<input type="radio" name="standard">2
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

2) You could otherwise put your JS code on window load:

window.onload = function() {
        var firstName = prompt('Please enter your first name');
        var secondName = prompt('Please enter your second name');

        if (firstName != '' && secondName != ''){
          var x = document.getElementById('standard');
          x.style.display = "block";
        }
        else{
          alert('please enter first and second name');
        }
};

This should make your code work. The latter method is preferred.

nitobuendia
  • 1,228
  • 7
  • 18
0

You are not able to see the div element because you called the script before the html loads so you can do it two ways:

call the app.js at the bottom

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> 
</head>

<body>
<h1 id="heading">Heading</h1>
<div id="standard">
<input type="radio" name="standard">1
<input type="radio" name="standard">2
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

Maintain the html and modify the app.js by calling the window.onload like so 

var firstName = prompt("Please enter your first name");

var secondName = prompt("Please enter your second name");

function init(){

if (firstName && secondName != ' ') {
var x = document.getElementById('standard');
x.style.display = "block";
} else {
  alert('please enter first and second name');

       }
  }

window.onload = init;
xtrimzz
  • 59
  • 6
-1

The issue is in your javascript if statement. Look at this line:

if (firstName && secondName != ' ') {

This line checks whether the variable firstName is defined AND the variable secondName is not equal to ' '. You need to check that both variables are not equal to ' '. Next, do not use ' '. If you do, then the user can leave the prompt box empty, and still the if statement will be positive. Instead, check whether the user has entered characters (A-Z or a-z):

var firstName = prompt('Please enter your first name');
var secondName = prompt('Please enter your second name');
var patt = /[abcdefghijklmnopqrstuvwxyz]/ig;

if (firstName.search(patt) != -1 && secondName.search(patt) != -1) {    
  var x = document.getElementById('standard');
  x.style.display = "block";
} else {
  alert('please enter first and second name');
}

You also need to place the <script> tag at the end of the HTML document. Otherwise, the DOM method document.getElementById() will return undefined.

Wais Kamal
  • 5,858
  • 2
  • 17
  • 36