Javascript getElementById doesn't select element

Question

I'm having a problem with my java-script code. Something is wrong and i don't understand. I have the following code and i can not alert the variable.

Javascript (inside head tag)

function read(){
  var city = document.getElementById("cd-dropdown").value;
  alert(city);
}

And this in body tag

<section class="main">
  <div class="fleft">
    <p>Choose City:</p>
  </div>
  <div class="fleft">
    <select id="cd-dropdown" class="cd-select">
      <option value="-1" selected>Choose City</option>
      <option value="Nicosia" >Nicosia</option>
      <option value="Larnaka" >Larnaka</option>
      <option value="Limassol" >Limassol</option>
      <option value="Paphos" >Paphos</option>
    </select>
  </div>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropdown.js"></script>
<script type="text/javascript">
  $( function() {
    $( '#cd-dropdown' ).dropdown( {
      gutter : 5,
      stack : false,
      delay : 100,
      slidingIn : 100
    } );
  });

</script>
......
<div class="cont_btn">
  <a onclick="read()" data-type="submit" class="btn">send</a>
</div>

I choose an option but I can't alert this option. I don't know what is the problem here.

@adricadar - it's in a function, which is called via a click... this is not a loading issue — freefaller, Apr 10 '15 at 17:31
What you get instead of alert? An error? The code alerts some unexpected value? Something else? — Teemu, Apr 10 '15 at 17:31
Note that your code works fine without the `.dropdown` call: http://jsfiddle.net/rd6azwx3/ Maybe that plugin is substantially altering your DOM somehow? — apsillers, Apr 10 '15 at 17:31
Just to confirm, @nestorasg, are you expecting your code to alert **when** you change the selection in the dropdown? Because at the moment your code would only do that when you click the `send` link — freefaller, Apr 10 '15 at 17:34
I tried this in JSFiddle and it works as you have it: https://jsfiddle.net/tkqtxjxd/1/ — James Wilkins, Apr 10 '15 at 17:45
when i click the send button the java-script function in the head tag must alert the choice i have chosen, but it never alert something — nestorasg, Apr 10 '15 at 17:46
Which means you'll need to show more of what's happening on the page. An error in another script you're not showing us might be at fault. — Adrian Lynch, Apr 10 '15 at 17:47
Make sure you don't have typos in your original code header. ;) Also, make sure your browser is not blocking the popup for some reason. — James Wilkins, Apr 10 '15 at 17:53
not it's not blocking it. if i alert a text is working. If i alert the variable is not working — nestorasg, Apr 10 '15 at 17:59

Jeff Sloyer · Answer 1 · 2015-04-10T17:35:15.790

You are close... Give the following a try. It is preferred in Jquery to actually use the .on() method. You can listen for whatever event you want and then respond to it.

$("#cd-dropdown").on("click", function() {
  alert($(this).val());
});

<section class="main">
                <div class="fleft">
                    <p><br />Choose City:</p>
                </div>
                <div class="fleft">
                    <select id="cd-dropdown" class="cd-select">
                        <option value="-1" selected>Choose City</option>
                        <option value="Nicosia" >Nicosia</option>
                        <option value="Larnaka" >Larnaka</option>
                        <option value="Limassol" >Limassol</option>
                        <option value="Paphos" >Paphos</option>
                        
                    </select>
                </div>
            </section>
        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
......

<div class="cont_btn">
    <a data-type="submit" class="btn">send</a>
</div>

I have two drop lists so i want when i click the send button to save both choices of the two lists. — nestorasg, Apr 10 '15 at 17:49

Noah · Answer 2 · 2015-04-10T17:51:42.773

When I reproduced the error in a fiddle, it didn't work until i changed jQuery's load to No wrap - in <head>. I think your problem may be that you're loading jQuery in the body, and it's loaded after your other script, which somehow throws things off. Try moving it to your <head> tag, like this:

<head>
    <script>
        function read(){
            var city = document.getElementById("cd-dropdown").value;
            alert(city);
        }
        $( function() {
            $( '#cd-dropdown' ).dropdown( {
                  gutter : 5,
                  stack : false,
                  delay : 100,
                  slidingIn : 100
            } );
        });
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="js/jquery.dropdown.js"></script>
    <!-- etc -->
    <title>Your Title</title>
</head>
<body>
        <section class="main">
                <div class="fleft">
                    <p></br>Choose City:</p>
                </div>
                <div class="fleft">
                    <select id="cd-dropdown" class="cd-select">
                        <option value="-1" selected>Choose City</option>
                        <option value="Nicosia" >Nicosia</option>
                        <option value="Larnaka" >Larnaka</option>
                        <option value="Limassol" >Limassol</option>
                        <option value="Paphos" >Paphos</option>
                    </select>
                </div>
            </section>
......

<div class="cont_btn">
    <a onclick="read()" href="#" data-type="submit" class="btn">Send</a>
</div>

You are right. The problem is with this but i haven't manage to make it work. If i remove it the alert is working. But if i move it to the head the style is not loaded. — nestorasg, Apr 10 '15 at 18:21
@netorasg try just loading jquery at the top but loading styling, etc. in the body. — Noah, Apr 10 '15 at 18:36

score 0 · Answer 3 · answered Apr 10 '15 at 17:49

Your code shoud work, when you click the button the checkbox is already created, try the code below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        function read(){
            var city = document.getElementById("cd-dropdown").value;
            alert(city);
        }
    </script>
</head>
<body>
<section class="main">
    <div class="fleft">
        <p>Choose City:</p>
    </div>
    <div class="fleft">
        <select id="cd-dropdown" class="cd-select">
            <option value="-1" selected>Choose City</option>
            <option value="Nicosia" >Nicosia</option>
            <option value="Larnaka" >Larnaka</option>
            <option value="Limassol" >Limassol</option>
            <option value="Paphos" >Paphos</option>
        </select>
    </div>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropdown.js"></script>
<script type="text/javascript">
    $( function() {
        $( '#cd-dropdown' ).dropdown( {
            gutter : 5,
            stack : false,
            delay : 100,
            slidingIn : 100
        } );
    });

</script>

<div class="cont_btn">
    <a onclick="read()" data-type="submit" class="btn">send</a>
</div>
</body>
</html>

Tested code on firefox

it works for me with the code as you described.I used firefox, What browser are you using? — GUISSOUMA Issam, Apr 10 '15 at 19:14
i have try all browsers. It works for you because you have not the style, classes etc. loaded. — nestorasg, Apr 13 '15 at 12:33
OK, if you still have the problem, just provide us the whole code of your page. — GUISSOUMA Issam, Apr 14 '15 at 12:32

Javascript getElementById doesn't select element

3 Answers3