Help with HTML/JAVASCRIPT code? Reload specific HTML elements?

Page 1 of 1

3 Replies - 537 Views - Last Post: 16 September 2012 - 05:59 AM

#1 Dkaussie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 14-September 12

Help with HTML/JAVASCRIPT code? Reload specific HTML elements?

Posted 16 September 2012 - 04:36 AM

Hey people, Im a beginner at coding and am attemting my own chrome app. I think everything should be working but i have no idea how i can reload elements so i can change specific parts of the code. For example, in the last couple of script tags within the form. I use document.write to add a form with properties with a value of a variable. but once I changed a variable(for example at the press of a button.) it doesnt change in the html. So i think if i was able to reload it, it would change. Any way heres my code:
<!DOCTYPE html>
<html>
	<script>
	var text1 = "Turns:";
	var text2 = "";
	var visibility1 = "visible";
	var visibility2 = "hidden";
	var value1 = 0;
	var value2 = 0;
	var valueB = "Start!";
	var onclick = "start()";
	var visibilityB = "visible";
	var img = "Boat.png";
	var imgL = "300px";
	var imgW = "300px"
	var par1 = "How many turns would you like to play for?"
	var par2 = "";
	var par3 = "";
	var maxturns;
	function getValue1 () {
	var form = document.getElementById("mainForm");
	return form.Form1.value;
	}
	function getValue2 () {
	var form = document.getElementById("mainForm");
	return form.Form2.value;
	}
	function test() {
	alert("Successful");
	}
	function start() {
	maxturns = getValue1();
	alert("Started")
	newTurn()
	}
	function newTurn() {
	alert("new turn")
	//do something
	}
	</script>
	<body>
		<div id="container" style="width:500px">
			<div id="header" style="background-color:#1515EB;text-align:center;">
				<h1 style="margin-bottom:0;font-family:Comic Sans MS;color:white;">Craypots!</h1>
			</div>
			<div id="content" style="text-align:center;background-color:#4BC4FF;height:200px;width:500px;float:left;">
				<p id="Paragraph1"><script language="Javascript">document.write(par1)</script></p>
				<p id="Paragraph2"><script language="Javascript">document.write(par2)</script></p>
				<p id="Paragraph3"><script language="Javascript">document.write(par3)</script></p>
				<form id="mainForm" name="form" action="" method="get">
					<b><script id="text1" language="Javascript">document.write(text1);</SCRIPT></b> <script id="sForm1" language="Javascript">document.write('<input type="number" name="form1" id="Form1" min="0" value='+ value1 + ' style="visibility:' + visibility1 + ';"/>')</script> <br />
					<b><script id="text2" language="Javascript">document.write(text2);</SCRIPT></b> <script id="sForm2" language="Javascript">document.write('<input type="number" name="form2" id="Form2" min="0" value='+ value2 + ' style="visibility:' + visibility2 + ';"/>');</script>
					<center><script language="Javascript">document.write('<input id="button" name="button" type="submit" value="' + valueB + '" onclick="'+ onclick + '" style="visibility:' + visibilityB + ';" />');</script></center>
				</form>
			</div>
			<div id="ImageDiv" style="height:500px;width:500px;background-color:#FFFF4B;float:left;"><center><script language="Javascript">document.write('<img id="MainPic" src="' + img + '" width="' + imgW +'" length="' + imgL + '"/>')</script></center></div>
		</div>
		<div id="footer" style="height:100px;width:500px;color:white;background-color:#1515EB;clear:both;text-align:center;">Made by Dylan Kay</div>
	</body>
</html>

So does anyone have any ideas in how i can fix this. Or a completely other way? Please reply.
Thanks

Is This A Good Question/Topic? 0
  • +

Replies To: Help with HTML/JAVASCRIPT code? Reload specific HTML elements?

#2 StefanOnRails  Icon User is offline

  • D.I.C Head

Reputation: 35
  • View blog
  • Posts: 105
  • Joined: 31-July 12

Re: Help with HTML/JAVASCRIPT code? Reload specific HTML elements?

Posted 16 September 2012 - 05:21 AM

First of all, what do you need to understand is that even though you change the value of document.write() parameter, it will have no affect on the page since you called the function only once. If you want to change dinamically the value of some elements you need to keep these in mind:

  • you need to have "container" element, in which the modifications will occur
  • you need to keep your actions into functions, so they can be repeated easily
  • you need to place an eventListener on some element, it will wait for something to happen and when it's time it will call the appropriate function


Here's an example on how to implement this method:
<!doctype html>
<html>
  <head>
     <meta charset="UTF-8" />
     <title>my app</title>
  </head>
  <body>
     <span id="container"></span>
     <button id="myButton">Click</button>     

     <script>
      var container, button;

      function changeValue(){
         var val = prompt('Insert a value:');
         container.innerHTML = 'You inserted <b>' + val + '</b>';
      }

      function init(){
         container = document.getElementById('container');
         button = document.getElementById('myButton');
         button.addEventListener('click',changeValue);
      }

      window.onload = init;
     </script>
  </body>
</html>

Was This Post Helpful? 1
  • +
  • -

#3 Dkaussie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 14-September 12

Re: Help with HTML/JAVASCRIPT code? Reload specific HTML elements?

Posted 16 September 2012 - 05:49 AM

Thnx tons, really helpful

This post has been edited by Dormilich: 16 September 2012 - 06:36 AM
Reason for edit:: removed unnecessary quote

Was This Post Helpful? 0
  • +
  • -

#4 StefanOnRails  Icon User is offline

  • D.I.C Head

Reputation: 35
  • View blog
  • Posts: 105
  • Joined: 31-July 12

Re: Help with HTML/JAVASCRIPT code? Reload specific HTML elements?

Posted 16 September 2012 - 05:59 AM

View PostDkaussie, on 16 September 2012 - 02:49 PM, said:

Thnx tons, really helpful

Glad it helped you :). By the way, my advice is to get rid of deprecated tags, such as <center>. Also you don't need to specify the language in which your scripts are written, the browser will choose Javascript as default value.

This post has been edited by StefanOnRails: 16 September 2012 - 06:08 AM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1