Question

document.getElementById() 未定义

2013-12-19

6687

javascript html

我是论坛新手，也是 html 新手。我尝试了论坛中的许多答案，但似乎都不起作用。虽然就像我说的，我是新手，但我尝试过浏览 w3shools，但很难弄清楚。

我想要的是，当我单击按钮时，我希望它查看 <h1><h1> 并且您是否 = x，如果您 = 为 x，则请更改为工作。如果您 = 工作，请更改为 x。

<!DOCTYPE html>
<html>
<Head>
<title>Heather I Love You!</title>
</head>
<body style= background-color:#A8A8A8>


<!========This is the header===========>
<div id="header" style= "background-color:#00FF33;" >
<h1><p id="hheader">Heather this is a series of Pitures, Videos, and Poems to 

show you the love that I have for you!"</p></h1></div>

<!=============The side bar that will allow a list of where she Wants to 

go==========>

<div id="Menu" Style="background-

color:#660033;height:300px;width:125px;float:left;">
<Talbe>

<b><h3{color:white}>Categories</h3></b><br>
<button type="button" onclick="ChangeHead()">click here!</button><br>



<!--Functions-->
<Script>
function ChangeHead()
{
var g=document.getElementById("hheader")
  x="Heather this is a series of Pitures, Videos, and Poems to show you the 

love that I have for you!"
  work="Here are some pictures of us and the boys"
  if (document.getElementById("hheader").innertext == x)
    {
    document.getElementById("hheader").innerHTML= =work; 
    }
  else
    {
    document.getElementById("hheader").innerHTML== x
    }
}
</Script>
</body>

</Html>

Answer 1

假设您有一个 id 为“hheader”的元素：

<div id='hheader'>Heather this is a series of Pitures, Videos, and Poems to show you the love that I have for you!</div>

以下脚本应该可以工作：

<script>
    function ChangeHead() {
  var g = document.getElementById("hheader");
  var x = "Heather this is a series of Pitures, Videos, and Poems to show you the love that I have for you!";
  var work = "Here are some pictures of us and the boys";

  if (document.getElementById("hheader").innerText == x) {
    document.getElementById("hheader").innerHTML = work; 
  } else {
    document.getElementById("hheader").innerHTML = x;
  }
};
ChangeHead();
</script>

这样脚本就会将“hheader”div 的文本更改为 work 变量的值

我在您的代码中发现了一些语法错误，并进行了相应的更正。

您可以在这里看到一个工作演示： http://jsfiddle.net/robertp/LvcCe/

Answer 2

1 - 第 34 行有一个未终止的字符串文字：

x="Heather this is a series of Pitures, Videos, and Poems to show you the 

love that I have for you!"

为了让脚本正常工作，您必须将字符串中的换行符替换为“to”和“show”之间的“\n”。另外，删除换行符。

2 - innerText 不适用于 Firefox，只需在第 38 行始终使用 innerHTML 即可：

if (document.getElementById("hheader").innertext == x)

3 - 如果您想分配一个值，= = 毫无意义。为变量分配值时，请仅使用 1 个等号。仅在编写 if 语句时使用两个！请查看：第 40 行：

document.getElementById("hheader").innerHTML= =work;

以及第 44 行：

document.getElementById("hheader").innerHTML== x

4 - 第 13 行末尾有一个额外的引号，您需要将其删除：

show you the love that I have for you!"

如果您替换了所有这些错误，您的脚本就可以正常工作。请查看此处可以正常工作的修改后的脚本版本： http://lespointscom.com/a/misc/stackoverflow/2014_01_29/new.html

或者直接复制粘贴此 html：

<!DOCTYPE html>
<html>
<Head>
<title>Heather I Love You!</title>
</head>
<body style= background-color:#A8A8A8>


<!========This is the header===========>
<div id="header" style= "background-color:#00FF33;" >
<h1><p id="hheader">Heather this is a series of Pitures, Videos, and Poems to 

show you the love that I have for you!</p></h1></div>

<!=============The side bar that will allow a list of where she Wants to 

go==========>

<div id="Menu" Style="background-

color:#660033;height:300px;width:125px;float:left;">
<Talbe>

<b><h3{color:white}>Categories</h3></b><br>
<button type="button" onclick="ChangeHead()">click here!</button><br>



<!--Functions-->
<Script>
function ChangeHead()
{
var g=document.getElementById("hheader")
  x="Heather this is a series of Pitures, Videos, and Poems to \n\nshow you the love that I have for you!"
  work="Here are some pictures of us and the boys"
  if (document.getElementById("hheader").innerHTML == x)
    {
    document.getElementById("hheader").innerHTML=work; 
    }
  else
    {
    document.getElementById("hheader").innerHTML= x
    }
}
</Script>
</body>

</Html>