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

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:

我在php模式中有一个echo元素:

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:

现在外面的PHP我尝试做一个基本的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?

然而,如果我在这里遗漏了一些东西,那么这个元素是无法访问的,是不是可以得到回声元素ID?

5 个解决方案

#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:

在执行元素选择之前,您应该确保您的DOM至少已加载。如果你可以使用jQuery,那么就像下面一样简单,你可以将这个脚本放在head部分或者正文中的任何地方:

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

<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:

当然你也可以使用jQuery执行DOM选择:

<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:

如果未定义$ row,$ team1或$ team2并且您启用了PHP错误和通知,那么HTML将呈现如下:

<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:

但是,如果您关闭了PHP错误和警告,您会看到类似的内容:

<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.

如果您无法访问选择HTML中的选项值(因为它们是空的),这将是一个很好的开始调查的步伐。

#2

Using JQUERY you can try following:

使用JQUERY,您可以尝试以下方法:

// I have used mouse down event for demo purpose.
$(document).delegate('#winner', 'mousedown', function ()
{
  alert('hi');
});

#3

Try accessing the value of the selected id I am giving a demo fiddle Demo fiddle document.getElementById("winner").value;

尝试访问所选id的值我给出一个演示小提琴演示小提琴document.getElementById(“winner”)。value;

#4

Echoing JS codes is common but there are these possibilities:

回应JS代码很常见,但有以下几种可能性:

1-You put document.getElementById("winner"); before php creating that element.

1 - 你把document.getElementById(“胜利者”);在php创建该元素之前。

2-There is a syntax error in script tag which cause error and there for your select does not work.

2 - 脚本标记中存在语法错误,导致错误,并且您的选择不起作用。

#5

since the php part will be available before page load you can simply do like this:

由于php部分在页面加载之前可用,你可以这样做:

<?php 
$row['team1']=1;$team1='India';$row['team2']=2; $team2='SA';
echo'<select name="picks" id="winner">';
echo'<option value="'.$row['team1'].'">'.$team1.'</option>';
echo'<option value="'.$row['team2'].'">'.$team2.'</option>';
echo'</select>';
    ?>
<script>

console.log(document.getElementById("winner"));//see this in console.

</script>

#1

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

<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>