CODEWITHSUNDEEP
javascripthtml
3xGuy
3xGuy

Reputation: 2559

document.getElementById() is undefined

I'm new to the forum and new to html. I've tried may of the answers in the forums but nothing is seaming to work. While like I said i'm new I've tried looking through w3shools and having a hard time figuring this out.

what I want is to when I click the button, I would like is for it to look at the <h1><h1> and are you = x, if you are = to x then please change to work. if you are = to work please change to 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>

Upvotes: 0

Views: 6820

Answers (2)

robertp
robertp

Reputation: 3652

Assuming that you have an element with the 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>

The following script should work:

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

So that the script will change the text of the 'hheader' div to the value of the work variable

I've found a few syntax errors in your code and I corrected them accordingly.

Here you can see a working demo: http://jsfiddle.net/robertp/LvcCe/

Upvotes: 1

georgesjeandenis
georgesjeandenis

Reputation: 118

1- You have an unterminated string literal at line 34 : 

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

love that I have for you!"

For your script to work, you have to replace the line breaks in your string with "\n" in between "to " and "show". Also, take out the line breaks.

2- innerText does not work with Firefox, just use innerHTML all the time instead at line 38 : 

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

3- = = makes no sense if you want to assign a value. Use only 1 equal sign when you assign a value to a variable. Use two only when you are making an if statement! Watch it at : line 40 : 

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

and at line 44 : 

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

4- Line 13 has an extra quote at the end that you want to take out :

show you the love that I have for you!"

If you replace all these mistakes, your script works. Please look at a modified version of your script that works here: http://lespointscom.com/a/misc/stackoverflow/2014_01_29/new.html

Or just copy paste this html as is:

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

Upvotes: 0

Related Questions