PHP Javascript无法访问php模式之外的echo元素id

Question

Humble appologies if this is a stupid question but I cant for the life of me figure out what is wrong here.

I have an echoed element inside php mode:

echo'<select name="picks" id="winner">';
            echo'<option value="'.$row['team1'].'">'.$team1.'</option>';
            echo'<option value="'.$row['team2'].'">'.$team2.'</option>';
    echo'</select>';

Now outside php I try to do a basic javascript GET:

document.getElementById("winner");

However the elemnt is not accessible am I missing something here, is it not possible to get echoed elements Ids?

Answer 1

You should make sure your DOM has at least loaded before performing element selects. If you can use jQuery, then this is as easy as the following, and you can place this script in the head section, or anywhere in the body:

$(document).ready(function() {
    // Perform any selects on the DOM
});

JS

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
    // The DOM is loaded and ready to be selected
    var select = document.getElementById("winner");
    var optionText = select.options[select.selectedIndex].text;
    var optionValue = select.options[select.selectedIndex].value;
});
</script>

Of course you can also perform DOM selects using jQuery:

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
    // The DOM is loaded and ready to be selected
    var optionText = $("#winner option:selected").text();
    var optionValue = $("#winner option:selected").val();
});
</script>

---

Another possibility

If $row, $team1 or $team2 are not defined and you have PHP errors and notices turned on, then the HTML will render like so:

<select name="picks" id="winner"><b>E_NOTICE : </b> type 8 -- Undefined variable: row -- at line 4<br /><b>E_NOTICE : </b> type 8 -- Undefined variable: team1 -- at line 4<br />
    <option value=""></option><b>E_NOTICE : </b> type 8 -- Undefined variable: row -- at line 5<br /><b>E_NOTICE : </b> type 8 -- Undefined variable: team2 -- at line 5<br />
    <option value="" selected="selected"></option>
</select>

However, if you have PHP errors and warnings turned off, you would see something like this instead:

<select name="picks" id="winner">
    <option value=""></option>
    <option value="" selected></option>
</select>

If you are unable to access the value of options in your select HTML (because they are empty), this would be a good pace to start investigating.