Procedural Updates Marquee (html + javascript)

So we had this update to relay to employees at work today.  I didn't want to be in charge, The other person in charge didn't want to be in charge.  So, we thought it'd be a clever idea to display the update on a projector.  So we did.  Then the stupid screensaver/screenlock kept kicking in.  I was asked for a way to avoid this (i.e. leaving a key pressed without losing the text).  So I wrote a quick and dirty html file.  I went for the marquee tag because it's quick and easy to use, and because it allows me to display a lot of text in a reduced area.  We could have a lot of things in the projector and keep the updates at the top or bottom of the screen.

I did something like this:

 <html>  
 <head>  
 <title>Latest Update</title>  
 </head>  
 <body>  
 <h1><marquee>Hey look this is the latest and greatest update</marquee></h1>  
 </body>  
 </html>


But then the others started asking:  "how would I go about using this?"  "how would I update it?"  "how can I change what is displayed?"

I'm not a teacher.  So, I made this thing.  It'll take their input and store it in a variable, which will then be displayed in a marquee.

code:


 <!--process updates marquee-->  
 <!--Jon Tohrs-->  
 <!--send me money-->  
 <html>  
 <head>  
 <title>Jon's Update Thingy</title>  
 </head>  
 <body>  
  <script>  
    function displayStuff()  
    {  
     var newUpdate = document.getElementById("userInput");  
     var theUpdate = newUpdate.value;  
     document.getElementById("theDiv").innerHTML = theUpdate;  
    }  
  </script>  
  <marquee><b><h1><div id="theDiv">  
  </div></h1></b></marquee>  
 <br /><br /><br /><br /><br />  
  <br /><br /><br /><br /><br />  
  <input id="userInput" type="text">  
  <input type="button" id="butn" value="Update" onClick="displayStuff()">  
  <br>   
 </body>  
 </html>
Etiquetas: