Question

我有一个功能

function setbid(catid)
{
if(catid == 30)
{

document.getElementById('bannerid').value = 1;

}
else if(catid == 31){
document.getElementById('bannerid').value = 2;
}
else if(catid == 32){
document.getElementById('bannerid').value = 6;
}
}

此函数正在调用选择框的onchange事件。

现在当选择框的值改变时，IE会抛出一个错误说

“document.getElementId（....）”为null或不是对象..

现在我能从中推断出什么？

请帮助..

更新

根据David的回复如何在为该字段赋值之前检查它的存在？其他浏览器也没有显示此错误，我将此bannerid字段作为文档中的隐藏字段...应该怎么做？

以下是选择框更改时显示的错误的屏幕截图 alt text

更新2 根据@haylem的答案更新

<script>
function setbid(catid)
{
var lookup = {
    '30' : 1,
    '31' : 2,
    '32' : 6
  };

  if (lookup.hasOwnProperty(catid)) {
    var el = document.getElementById('bannerid');

    if (el) {
      el.value = lookup[catid];
    }
  }
/*if(catid == 30)
{
if(typeof(document.getElementById('bannerid')) == null ){
document.getElementById('bannerid').value = 1;
}
}
else if(catid == 31){
document.getElementById('bannerid').value = 2;
}
else if(catid == 32){
document.getElementById('bannerid').value = 6;
}*/
}
</script>

<div style="margin:0px auto">
<div class="instantprice-popup-bg">
<form name="instantpop" id="instantpop" action="" method="post" style="margin:0px; padding:0px" onsubmit="">
    <input type="hidden" name="sessid" id="sessid" value="<?php echo $_GET['osCsid'];?>">
<div class="instantprice">

            <ul>
                <li class="text12pt" style="color:#FF0000; display:none;" id="appsize">For special low price on sizes over 30ft. wide and 10ft. height contact us on sales@bannerbuzz.com.</li>
                <li class="text12pt" style="color:#FF0000; display:none;" id="vinylsize">Please enter width upto 30 ft & height upto 5 ft for Vinyl Signs/Decals(Posters).</li>

                <li class="col1">Select Product</li>
                <li class="col2">

                    <input type="hidden" name="price" id="price" value="<?php echo "15"; ?>" />
                    <input type="hidden" name="bannerid" id="bannerid" value="" />
                    <select name="product" class="dropdownfield" id="product" style="width: 180px;" onchange="javascript:setbid(document.getElementById('product').value);">
                    <option value="">Select Product</option>
                    <?php
                        while($result=mysql_fetch_object($sql_query))
                        {
                            ?><option value="<?php echo $result->categories_id;?>" <?php if($_POST['product'] == $result->categories_id) {?> selected="selected" <?php } ?>><?php echo $result->categories_name;?></option><?php 
                        }
                    ?>
                    </select>

                </li>
                <li class="col1">Select Size (in ft.)</li>
                <li class="col2">
                    <div class="sizebox" style="width:250px;">
                        <div class="sizebox col1"><input name="size_w" id="size_w" type="text" class="sizetextfield1" value="<?php if(isset($_REQUEST['size_w'])){ echo $_REQUEST['size_w']; } else { echo "2"; } ?>" ></div>
                        <div class="sizebox col2"><img src="images/homepage/up-arrow.jpg" width="12" height="9" border="0" align="top" onclick="increaseCounter('size_w')" /><img src="images/homepage/down-arrow.jpg" width="12" height="9" border="0" onclick="decreaseCounter('size_w');" /></div>
                        <div class="sizebox col3"  style="width:35px;">width</div>
                        <div class="sizebox col1"><input name="size_h" id="size_h" type="text" class="sizetextfield1" value="<?php if(isset($_REQUEST['size_h'])){ echo $_REQUEST['size_h']; } else { echo "2"; } ?>" style="margin-left:8px" ></div>
                        <div class="sizebox col2"><img src="images/homepage/up-arrow.jpg" width="12" height="9" border="0" align="top" onclick="increaseCounter('size_h');" /><img src="images/homepage/down-arrow.jpg" width="12" height="9" border="0" onclick="decreaseCounter('size_h');" /></div>
                        <div class="sizebox col3" style="width:35px;">&nbsp;height</div>
                        <input name="size" id="size" type="hidden" value="<?php echo $_REQUEST['size_h'].'x'.$_REQUEST['size_w']; ?>">
                    </div>
                </li>
                <li class="col1">Select Quantity</li>
                <li class="col2">
                    <select id="qty" name="qty" >
                        <?php 
                            for($i=1;$i<=100;$i++)
                            {
                                ?> <option value="<?php echo $i;?>" <?php if($_POST['qty'] == $i) {?> selected="selected" <?php } ?>><?php echo $i;?></option> <?php
                            }
                        ?>
                    </select>
                </li>
                <li class="col1">Select Shipping</li>
                <li class="col2">
                    <select id="shipping_method" name="shipping_method" class="dropdownfield" >
                        <option value="">Select Shipping</option>
                        <option value="standard" <?php if($_POST['shipping_method'] == 'standard') {?> selected="selected" <?php } ?>>Standard (7 - 12 days from proof)</option>
                        <option value="expedited"<?php if($_POST['shipping_method'] == 'expedited') {?> selected="selected" <?php } ?>>Expedited (5 work days from Proof)</option>
                    </select>
                </li>
                <li class="col1" id="sidehead">Two Side Banner</li>
                <li class="col2" id="sideval">
                    <input type="checkbox" id="side" name="side" value="1"  />
                </li>
                <li class="col1">Product Price</li>
                <li class="col2"><span class="text15pt" id="total_display">$0</span>
                    <input type="hidden" id="total" name="total" class="textfield" value="15" readonly="readonly" style="width:60px;"/>
                </li>

                <li class="col1">Shipping Cost</li>
                <li class="col2"><span class="text15pt" id="shipping_display">$0</span>
                    <input type="hidden" id="shipping" name="shipping" class="textfield" value="" readonly="readonly" style="width:60px;" />
                </li>
                <li class="bannerprice" id="grand_total_display">TOTAL PRICE : $0

                </li><input type="hidden" id="grand_total" name="grand_total" value="" readonly="readonly" style="width:60px;" />
                <li style="float:none; text-align:center">

                    <input type="submit" class="getprice-btn" name="getprice" value="" />

                </li>
                <li class="text12pt">Final Price, No Hidden Charges</li>
            </ul>
            <input type="hidden" name="getpriceclick" value="1" />
        </div>
        </form>
</div>
</div>

Answer 1

现在我能从中推断出什么？

文档中没有id bannerid 的元素。

Answer 2

重写为：

function setbid(catid) {
  var lookup = {
    '30' : 1,
    '31' : 2,
    '32' : 6
  };

  if (lookup.hasOwnProperty(catid)) {
    var el = document.getElementById('bannerid');

    if (el) {
      el.value = lookup[catid];
    }
  }
}

并且确保有一个元素 id 属性完全写为 bannerid 。

我给你的功能与你的功能略有不同：

使用查找表来获取值而不是链接（特别是如果稍后将添加值）
仅在代码的一部分中执行元素查找而不是复制它
检查元素是否存在

EDIT for Update2 ：

请注意与您的问题直接相关，但是：

您应该更喜欢<head>部分
您应该使用渐进增强功能来响应事件，而不是破坏HTML和JavaScript代码。改为使用事件挂钩。

还要检查渲染页面的源代码，以查看渲染器是否因某些错误或PHP代码而未使用某些元素。

修改

如果我使用以下测试，它可以完美地运行：

<script> function setbid(catid) { var lookup = { '30' : 1, '31' : 2, '32' : 6 }; if (lookup.hasOwnProperty(catid)) { var el = document.getElementById('bannerid'); if (el) { el.value = lookup[catid]; alert('done [' + el.value + ']'); } } } </script> <div style="margin:0px auto"> <div class="instantprice-popup-bg"> <form name="instantpop" id="instantpop" action="" method="post" style="margin:0px; padding:0px" onsubmit=""> <input type="hidden" name="sessid" id="sessid" value="<?php echo $_GET['osCsid'];?>"> <div class="instantprice"> <ul> <li class="text12pt" style="color:#FF0000; display:none;" id="appsize">For special low price on sizes over 30ft. wide and 10ft. height contact us on sales@bannerbuzz.com.</li> <li class="text12pt" style="color:#FF0000; display:none;" id="vinylsize">Please enter width upto 30 ft & height upto 5 ft for Vinyl Signs/Decals(Posters).</li> <li class="col1">Select Product</li> <li class="col2"> <input type="hidden" name="price" id="price" value="15" /> <input type="hidden" name="bannerid" id="bannerid" value="" /> <select name="product" class="dropdownfield" id="product" style="width: 180px;" onchange="javascript:setbid(document.getElementById('product').value);"> <option value="">Select Product</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="30">30</option> <option value="31">31</option> <option value="32">32</option> </select></li> </ul> <input type="hidden" name="getpriceclick" value="1" /> </div> </form> </div> </div>

所以你有一些东西搞砸了你的元素。我怀疑你的PHP代码出了问题并产生了错误的输出。

Answer 3

如果执行此函数时DOM上不存在该元素，则document.getElementById（...）将返回null（或未定义）。

开发时始终最好使用脚本检查器（如FireBug或Safari控制台）。如果必须在IE6中开发，您可能需要逐步“警告”进行检查。

建议的调试输出：

alert(document.getElementById);
alert(document.getElementById("bannerid"));
alert(document.getElementById("bannerid").value);

Answer 4

您只需启用该隐藏字段，并检查该字段是否具有任何值，而浏览器会抛出错误。

Answer 5

 <script type="text/javascript">
function notEmpty(){

    var myTextField = document.getElementById('myText');

    if(myTextField.value != "")
      {
        alert("You entered: " + myTextField.value)
            alert(document.getElementById('myText1').value=0);
      }
    else
        alert("Would you please enter some text?")      
}
</script>
<input type='text' id='myText' />
<input type='text' id='myText1' />
<input type='button' onclick='notEmpty()' value='click' />

试试这个例子

IE6显示以下给定函数的JavaScript错误，并且下面还提到了错误

5 个答案: