1

can someone be happy to help me, in my code below I'm trying to display a div with a dropdown select, but why is the existing javascript not working.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #business {
  display: none;
}
#local {
  display: none;
}

    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script>
        $('#purpose').on('change', function () {
                if (this.value === "1") {
                    $("#business").show();
                    $("#local").hide();
                } else if (this.value === "2") {
                    $("#business").hide();
                    $("#local").show();
                } else {
                    $("#business").hide();
                    $("#local").hide();
                }
            });
    </script>
</head>
<body>
    <select id='purpose'>
        <option value="0">Personal use</option>
        <option value="1">Business use</option>
        <option value="2">Passing on to a client</option>
    </select>
    <div id="business">
        <label for="business">Business Name</label>
        <input type='text' class='text' name='business' value size='20' />
    </div>
    <div id="local">
        <label for="local">Local Name</label>
        <input type='text' class='text' name='local' value size='20' />
    </div>
</body>
</html>

the above code works fine if i run it in fiddle, but not when i run it on my local computer, can someone help me, what should i do for the above problem, any kind of help i thank you.

SuperStormer
  • 4,531
  • 5
  • 20
  • 32
Andri
  • 29
  • 2

2 Answers2

0

The <select id='purpose'> doesn't exist yet when you try to run $('#purpose').on('change', ...). Either move your <script> tag to the end of the <body> tag, or add a defer attribute to the tag (which follows best practices anyways).

SuperStormer
  • 4,531
  • 5
  • 20
  • 32
-1

Try this, you just needed to move few things around.

$('#purpose').on('change', function() {
  if (this.value === "1") {
    $("#business").show();
    $("#local").hide();
  } else if (this.value === "2") {
    $("#business").hide();
    $("#local").show();
  } else {
    $("#business").hide();
    $("#local").hide();
  }
});
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #business {
      display: none;
    }
    
    #local {
      display: none;
    }
  </style>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <select id='purpose'>
    <option value="0">Personal use</option>
    <option value="1">Business use</option>
    <option value="2">Passing on to a client</option>
  </select>
  <div id="business">
    <label for="business">Business Name</label>
    <input type='text' class='text' name='business' value size='20' />
  </div>
  <div id="local">
    <label for="local">Local Name</label>
    <input type='text' class='text' name='local' value size='20' />
  </div>
</body>

</html>
NoviceDeveloper
  • 1,221
  • 3
  • 14
  • 38
  • Why is there a script tag above the doctype? – SuperStormer Jan 17 '22 at 04:41
  • @SuperStormer ... Best practice is to keep your JavaScript function in a separate file not altogether spaghetti code. However, it will work another way too. – NoviceDeveloper Jan 17 '22 at 04:45
  • No, I mean why is the jquery script tag above the HTML doctype? – SuperStormer Jan 17 '22 at 04:46
  • @SuperStormer That was by default added when I wanted to reference JQuery. – NoviceDeveloper Jan 17 '22 at 04:47
  • @SuperStormer if this makes you happy :) .. defer is not needed if your script is just ahead of your html ... if you add your script at the bottom of the page then use defer in this case. Haven't tested. – NoviceDeveloper Jan 17 '22 at 04:50
  • That's the opposite of what is correct - defer makes the script tag run after the html is loaded, so defer **is** needed when the script is before the html, and vice versa. – SuperStormer Jan 17 '22 at 05:09
  • Test it if you don't believe me. – SuperStormer Jan 17 '22 at 05:11
  • I was talking about JQuery ref. In this case, the reference to my JQuery doesn't matter where is, as long as it runs first. If JQuery should wait for the DOM elements to run first including client JavaScript ??? what happens? I think we overkilled this. – NoviceDeveloper Jan 17 '22 at 05:29
  • I also edited earlier just because you were asking about my JQuery. If you run my script with defer will it work? I don't think it will. – NoviceDeveloper Jan 17 '22 at 05:30