Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Location
    Oklahoma City, OK
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    innerHTML disappears

    Hello everyone! I'm a student and am trying to write some very simple code. My problem is I use innerHTML in my script file to send some text to a div in my html. When it's sent it renders and then quickly disappears. I've attached my code. Any help is dearly appreciated.

    There are two separate "files" .html & .js:
    Code:
    <?xml version = "1/0" encoding = "utf-8"?>
    <!DOCTYPE html Public "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns = "http://www.w3.org/1999.xhtm">
    	<head>
    		<!--  -->
    		<!-- CS111 Quiz -->
    		<title>CS111 Quiz</title>
    		<script text = "text/javascript" src = "script.js">
    		</script>
    	</head>
    	<body>
    		<h1 align="center">Mike Overholt</h1>
    		<br/>
    		<br/>
    		<form id="answers" name="answers" onSubmit="return quiz();">
    			<table width="100%">
    				<tr>
    					<td align="center"><h3>1. What is 1+1?</h3></td>
    					<td align="center"><h3>2. What is 2+2?</h3></td>
    					<td align="center"><h3>3. What is 3+3?</h3></td>
    				</tr>
    				<tr>
    					<td align="center">
    						<input type="text" id="1" name="answer1" value=" " align="center"/>
    					</td>
    					<td align="center">
    						<input type="text" id="2" name="answer2" value=" " align="center"/>
    					</td>
    					<td align="center">
    						<input type="text" id="3" name="answer3" value=" " align="center"/>
    					</td>
    				</tr>
    				<tr>
    					<td align="center">
    					</td>
    					<td align="center">
    						<input type="submit" id="submit" name="submit" value="submit" onClick="quiz();" align="center"/>
    					</td>
    					<td align="center">
    					</td>
    				</tr>
    			</table>
    		</form>
    		<div id="div1" align="center" name="answer_box" style="border:2px; border-color:gray; border-style:solid; width:50%; margin-left:auto; margin-right:auto; height:200px;">
    			<p id="p1"></p><br/>
    			<p id="p2"></p><br/>
    			<p id="p3"></p>
    			<!--<script>alert(1);</script>-->
    		</div>
    	</body>	
    </html>
    
    
    
    
    //script.js
    //Mike Overholt
    //Quiz 1
    function quiz()
    	{
    	var i=1;
    	var ans=new Array();
    	ans[1]=2;
    	ans[2]=4;
    	ans[3]=6;
    	for(i=1;i<ans.length;i++)
    		{
    		var a=document.getElementById("p"+i);
    		if(document.getElementById(i).value==ans[i])
    			{
    			a.innerHTML="You answered number "+i+" correctly!";
    			}
    		else
    			{
    			alert("You answered number "+i+" incorrectly, please try again.");
    			}
    		}
    	}
    Last edited by Kor; 06-08-2010 at 02:46 PM. Reason: wrap the code [code][/code]

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Add a return false; at the end of your function, after the for loop, to cancel the default action of a button having type="submit".
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    moverholt31 (06-08-2010)

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by moverholt31 View Post
    Code:
    <?xml version = "1/0" encoding = "utf-8"?>
    <!DOCTYPE html Public "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns = "http://www.w3.org/1999.xhtm">
    	<head>
    		<!--  -->
    		<!-- CS111 Quiz -->
    		<title>CS111 Quiz</title>
    		<script text = "text/javascript" src = "script.js">
    		</script>
    	</head>
    Your Doctype is not quite well written. It is better to write nothing in front of the DTD. Use this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<title>An XHTML 1.0 Strict standard template</title>
    	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    </head>
    ...
    ...
    See also the standard:
    http://www.w3.org/QA/2002/04/valid-dtd-list.html

    A XHTML document is not exactly an XML document. It is an HTML translated into XML language. Slightly different.
    Last edited by Kor; 06-08-2010 at 02:56 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    moverholt31 (06-09-2010)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •