CODEWITHSUNDEEP
javascripthtml
Ph1shPhryd
Ph1shPhryd

Reputation: 109

Script removing text - JavaScript

The final outcome I want to have is "Todays Beer Style is: "Beer Style". When I enter the javascript code, the "Todays Beer Style is:" disappears. I am not sure why. Below is the code.

HTML Code

<!DOCTYPE html>

<html lang="en">
<head>
<!-- The Homebrewery
    Author: Chris Stastny
    Date: October 27th, 2015
-->

<meta charset="utf-8">
<title>The Homebrewery - Homebrewing</title>
<meta name="description" content="The Homebrewery - Homebrewing">
<meta name="author" content="Chris Stastny">
<link href="final.css" rel="stylesheet" type="text/css" />

<script src="modernizr-1.5.js"></script>
<script src="beerStyle.js"></script>

</head>
<header>
 <h1> The Homebrewery</h1>
<nav>
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Equipment</a></li>
    <li><a href="#">Brew Log</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">Newsletter</a></li>
  </ul>
</nav>
</header>
<body>
  <h2>Greetings!</h2>

<div id="dateBox">
    Today Beer Style is: 
    <script>
 document.getElementById("dateBox").innerHTML=style[new Date().getUTCDate()];
    </script> 
</div>   
<br>   
<img src="beer.jpg" alt="beer">

<p>This website was built to keep people informed about my homebrewing adventures. It will have brewday pictures, videos (possibly) in the future, recipes and general homebrewing information. There is also a newsletter that you can sign up for that will go into more detail about what is going on with my brewing.</p>

<br>
<footer>The Homebrewery - Homebrewing - 2015</footer>  

</body> 


</html>

Upvotes: 0

Views: 49

Answers (3)

Paul Roub
Paul Roub

Reputation: 36438

You're replacing the entire div, including the preamble. Better to have a span that's just the replaceable text:

 Today Beer Style is:  <span id="beerStyle"></span>

then

 document.getElementById("beerStyle").innerHTML=style[new Date().getUTCDate()];

Upvotes: 1

Smern
Smern

Reputation: 19066

Change

<div id="dateBox">
    Today Beer Style is: 
    <script>
 document.getElementById("dateBox").innerHTML=style[new Date().getUTCDate()];
    </script> 
</div>

to:

<div id="dateBox">
    Today Beer Style is: <span id="beerStyle"></span>
    <script>
 document.getElementById("beerStyle").innerHTML=style[new Date().getUTCDate()];
    </script> 
</div>

Upvotes: 3

ryanl
ryanl

Reputation: 89

When you do this: 

document.getElementById("dateBox").innerHTML=style[new Date().getUTCDate()];

You are replacing everything inside that div with what you are trying to add

try:

document.getElementById("dateBox").innerHTML += style[new Date().getUTCDate()];

Upvotes: 4

Related Questions