如何解决'Typerror是未定义的'在JavaScript中的函数的消息？ [英] How to fix 'Typerror is undefined' message for a function in javascript?

问题描述

我试图在用户将光标悬停在选定的选项上时操作背景图像。我在萤火虫中测试了我的代码并加载了页面。立即得到：

TypeError：document.getElementsByTagName（...）。style is undefined

  var bg = document.getElementsByTagName（html）。style.backgroundColor =white; 
  

以及悬停我得到：

TypeError：bg.document未定义

  bg.document.getElementsByTagName （html）。style.backgroundImage =url（'http://upload.wikimedia.org/wikipedia/commons/b/be/500_USD_note%3B_series_of_1934%3B_obverse.jpg'）; 
  

如何解决此错误？

HTML代码：

 < form> 
 <！ - 显示大量绿色字体颜色和大小的金钱 - > 
选择您的数码单反相机预算范围：
< select id =budgetSelonChange =onChange（）;> 
< option value =selectOneBudgetselected =selected>选择一个< / option> 
< option value =fiveHundredDollarsonMouseOver =changeBackgroundImage（this）;>& lt; $ 500℃; /选项> 
< option value =thousandDollarsonMouseOver =changeBackgroundImage（this）;>& lt; $ 1000℃; /选项> 
< / select> 
< / form> 
  

CSS代码：

  html {
 background：url（'http://upload.wikimedia.org/wikipedia/commons/8/8a/1000_USD_note%3B_series_of_1934%3B_obverse.jpg' ）无重复中心中心固定; 
 / *  -  webkit-background-size：cover; 
 -moz-background-size：cover; 
 -o-background-size：cover; * / 
 background-size：cover; 
 min-width：1300px; / *在调整大小时保留相同的宽度* / 
} 
  

JAVASCRIPT：

  var bg = document.getElementsByTagName（html）。style.backgroundColor =white; 
 //当用户将鼠标悬停在选择菜单中的某个选项上时，动态更改背景图像
 function changeBackgroundImage（bg）
 {
 bg.document.getElementsByTagName（html） .style.backgroundImage =url（'http://upload.wikimedia.org/wikipedia/commons/b/be/500_USD_note%3B_series_of_1934%3B_obverse.jpg'）; 
} 
  

解决方案

顾名思义：

  document.getElementsByTagName 
  

返回一个不是单个节点的标签集合，我说这是一个集合，因为它实际上并不返回一个数组，而是返回一个类似数组的对象。

<如果您只需要获取html节点，您可以简单地执行：

  document.lastChild.style.backgroundColor =白色; 
  

还有

  document.documentElement.style.backgroundColor =white; 
  

但是，如果您需要使用类似的查找器功能找到它，则应该这样做：

  document.getElementsByTagName（html）[0] .style.backgroundColor =white; 
  

以及这一个：

  document.querySelector（html）。style.backgroundColor =white; 
  

I am trying to manipulate the background image as soon as the user hovers over a selected option. I tested my code in firebug and loaded up the page. Instantly I get:

TypeError: document.getElementsByTagName(...).style is undefined

var bg = document.getElementsByTagName("html").style.backgroundColor = "white";

and for the hover I get:

TypeError: bg.document is undefined

bg.document.getElementsByTagName("html").style.backgroundImage = "url('http://upload.wikimedia.org/wikipedia/commons/b/be/500_USD_note%3B_series_of_1934%3B_obverse.jpg')";

How do I fix this error?

HTML CODE:

<form>
    <!--show a large print of green font color and size money-->
    Select your DSLR budget range:
    <select id="budgetSel" onChange="onChange();">
        <option value="selectOneBudget" selected="selected">Select one</option>
        <option value="fiveHundredDollars" onMouseOver="changeBackgroundImage(this);">&lt; $500</option>
        <option value="thousandDollars" onMouseOver="changeBackgroundImage(this);">&lt; $1000</option>
    </select>
</form>

CSS CODE:

html{
background: url('http://upload.wikimedia.org/wikipedia/commons/8/8a/1000_USD_note%3B_series_of_1934%3B_obverse.jpg') no-repeat center center fixed;
/*-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;*/
background-size: cover;
min-width:1300px; /*keep the same width when resizing*/
}

JAVASCRIPT:

var bg = document.getElementsByTagName("html").style.backgroundColor = "white";
// function to dynamically change the background image when user hovers over an option in select menu
function changeBackgroundImage(bg)
{
   bg.document.getElementsByTagName("html").style.backgroundImage = "url('http://upload.wikimedia.org/wikipedia/commons/b/be/500_USD_note%3B_series_of_1934%3B_obverse.jpg')";
}

解决方案

as its name implies:

document.getElementsByTagName

returns a collection of tags not a single node, I said a collection because it doesn't actually return an array but it returns an array-like object.

If you only need to get the html node, you can simply do:

document.lastChild.style.backgroundColor = "white";

and also

document.documentElement.style.backgroundColor = "white";

but if you need to find it using a finder function like that, you should do this instead:

document.getElementsByTagName("html")[0].style.backgroundColor = "white";

and also this one:

document.querySelector("html").style.backgroundColor = "white";

这篇关于如何解决'Typerror是未定义的'在JavaScript中的函数的消息？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！