JavaScript - Innerhtml Problem.
Hi.
I've created a test page with loads of comments on the source, as this is quite hard to explain. phurley.co.uk/test.php - (if you select 'specific date', this is the one i'm trying to get working for now) Basically, I have a text box that when selected makes a calendar pop up. This works fine, but I am now making the html for the text box be produced via innerHTML in a JS function (with select boxes and a case/break), and the pop up no longer works. I've tried all night to get this working but my JS skills are letting me down. If you could take the time to have a look at the source code it would be very very much appreciated. thank you Similar TutorialsI have been working with someone of a forum to get a script functioning, and we have it working fine in firefox and safari etc.. but there seems to be issues with internet explorer and the script is not functioning in that browser. It seems it is an inner html issue. I am very new to ajax and my javascript is limited, but with other help assisting me, but I have a deadline of today. I just need to get this working in internet explorer, can anyone please help. here is the ajax code for the script. Code: function get_XmlHttp() { var xmlHttp = null; // if a native XMLHttpRequest object exists if ( window.XMLHttpRequest ) { xmlHttp= new XMLHttpRequest; } else { // let's try an ActiveXObject try { xmlHttp= new ActiveXObject("MSXML2.XMLHTTP.6.0"); } catch(ex) { xmlHttp= new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } function ajaxrequest(tagID,post) { var http = get_XmlHttp(); var info = 'request='+post; http.onreadystatechange = function() { if (http.readyState == 4) { document.getElementById(tagID).innerHTML = http.responseText; } } http.open("POST", 'destinations.ajax.regions.php', true); // edit php.php to your actual php file path http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); http.send(info); } Hello All, I'm new to javascript and trying to build a news page that has expandable/collapsible headlines. I copied some javascript to do this that works fine except that when I try to replace the clickable '+' or '-' characters with clickable images, somehow doing a comparison of the innerHTML in order to toggle it from the plus image to the minus image doesn't work. I'm assuming it has to do with how innerHTML translates tagged html vs. straight characters or text, but have tried everything and can't fix it. Any help would be greatly appreciated. Below are the script and the html in the body. Here's the script: Code: <style type="text/css"><!-- .save{ behavior:url(#default#savehistory);} a.dsphead{ text-decoration:none;} a.dsphead:hover{ text-decoration:underline;} a.dsphead span.dspimg{ font-weight:normal;} .dspcont{ display:none;} //--></style> <script type="text/javascript"><!-- function dsp(loc){ if(document.getElementById){ var foc=loc.firstChild; foc=loc.firstChild.innerHTML? loc.firstChild: loc.firstChild.nextSibling; // this is the problem area, which worked when it was like this: // foc.innerHTML=foc.innerHTML=='+'?'-':'+'; foc.innerHTML=foc.innerHTML=='<img src=../img/art/expand.png></img>'?'<img src=../img/art/collapse.png></img>':'src=../img/art/expand.png></img>'; foc=loc.parentNode.nextSibling.style? loc.parentNode.nextSibling: loc.parentNode.nextSibling.nextSibling; foc.style.display=foc.style.display=='block'?'none':'block'; }} if(!document.getElementById) document.write('<style type="text/css"><!--\n'+ '.dspcont{display:block;}\n'+ '//--></style>'); //--></script> <noscript> <style type="text/css"><!-- .dspcont{display:block;} //--></style> </noscript> And here is the html: Code: <h3><a href="javascript:void(0)" class="dsphead" onclick="dsp(this)"> <!-- this is the problem area which worked when it was like this: <span class="dspimg">+</span> --> <span class="dspimg"><img src=../img/art/expand.png></img></span>August 2, 2010 - Latest Headline</a></h3> <div class="dspcont"><br /><p>Content paragraph 1</p><p>Content paragraph 2</p> Hi guys, The code in question is www.spectral.og.uk/test5/work2.htm I am trying to change the main 'SPECTRAL' video content mid-right when I click on the 'Change Movie' at the bottom. Eventually I want to be able to do this from the thumbnails but Im just running a simple test first. So I defined the function 'ChangeMOVIE' on line 14 using document.getElementById & innerHTML, etc, to replicate the flash player script contents that are incidentally ID'd as "BIGCHANGE" (ie, part of the main flash player on line 249) but simply replacing a different name for the video when it reaches the Flashvars "&file=Splash.flv" to something else to effect the change of video content I'm after, 'Olay.flv' I think. I have tried so hard to research into this but it just doesn't work. Is the problem to do with that :- 1) You can't ID something within <script>, ie BIGCHANGE in this instance. 2) innerHTML is only really for text replacement, not the amount of script I've stuck into it to replace within the whole <TD> cell with ID 'VID' (ie the main flash player) even though I've used delimiters and everything within the innerHTML data to try and not confuse it with apostrophes within speach marks, etc Any thoughts where I'm going wrong? Maybe Im barking up the wrong tree on this! Thanks so much guys for any headsup on a solution to this as I've been up all night for about a week on this! Dom Hey guys, I've just started with javascript so please, be gentle I am making a wordpress plug-in which puts a banner-rotator on the front page which is able to load both images and flvs'. It has a carousel menuand the images/objects are loaded as you hover over the thumbnails. I have made an js array in a php loop so that every element of the menu list gets assigned a different onMouseOver function when it is generated. Because I was not able to change FlashVars with js I have put the whole object embed code in one variable and insert that in a div with innerHTML when mouseOver. This works fine in firefox but not at all in any other browsers!! What can I do? The website is located at: www.mediapod.org/jwp Here is the code: Code: function wp_main_player() { global $wpdb; $noChartsID = $wpdb->get_col($wpdb->prepare("SELECT * FROM wp_term_relationships WHERE term_taxonomy_id = 5")); $noCharts = count($noChartsID); ?> <div class="box" style="height:350px;"> <div id="maind" style="height:280px;"> <div id="icont"> <a id="link" href="#"><img name="main" height="280" width="560" src="" /></a> </div> <div id="fcont" style="display:none; width:100%; height:100%; background:#fff;"> </div> </div> <a class="pprev" style="float:left; width:10px; height:60px; margin-top:10px;" href="javascript:void(0)"></a> <div class="player" style="float:left; margin-top:11px; width:540px !important;"> <script> var myCode = []; </script> <ul style="float:left;"> <?php if ($noCharts > 0) { for ($i = 0; $i < $noCharts; $i += 1) { $posts = $wpdb->get_row("SELECT * FROM wp_posts WHERE id = $noChartsID[$i]", ARRAY_A); $link = $wpdb->get_row("SELECT * FROM wp_postmeta WHERE post_id = $noChartsID[$i] AND meta_key ='link'", ARRAY_A); $link = $link['meta_value']; $image = $posts['post_content']; $flv = strpos($image, 'flv:'); if ($flv==1){ $flv = str_replace("-flv:", "", $image); $flv = substr(rstrstr($flv, '-img:'),0 ,-6); $image = substr(strstr($image, '-img:'), 5); ?> <script> myCode[<?php echo $i; ?>]=<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="560" height="280" id="FlashXMLShoutcastRadioPlayerV4.0" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="http://www.mediapod.org/jwp/wp-content/plugins/JRockControll/FLVPlayer_Progressive.swf" /> <param name="menu" value="false" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" ></param> <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=http://www.mediapod.org/jwp/wp-content/plugins/JRockControll/Corona_Skin_1&streamName=<?php echo $flv; ?>&autoPlay=true&autoRewind=false" /> <param name="bgcolor" value="#111111" /> <embed bgcolor="#111111" wmode="opaque" src="http://www.mediapod.org/jwp/wp-content/plugins/JRockControll/FLVPlayer_Progressive.swf" menu="false" FlashVars ="&MM_ComponentVersion=1&skinName=http://www.mediapod.org/jwp/wp-content/plugins/JRockControll/Corona_Skin_1&streamName=<?php echo $flv; ?>&autoPlay=true&autoRewind=false" quality="high" width="560" height="280" name="FlashXMLShoutcastRadioPlayerV4.0" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>; </script> <li class="p_img"><img onmouseover="document.getElementById('icont').style.display='none';document.getElementById('fcont').style.display=''; document.getElementById('fcont').innerHTML=myCode[<?php echo $i; ?>]; document.main.src='<?php echo $image;?>'; document.getElementById('link').href='<?php echo $link;?>';" src="<?php echo $image;?>" height="52" width="102" /></li> <?php } else { ?> <li class="p_img"><img onmouseover="document.getElementById('icont').style.display=''; document.getElementById('fcont').innerHTML=''; document.getElementById('fcont').style.display='none'; document.main.src='<?php echo $image;?>'; document.getElementById('link').href='<?php echo $link;?>';" src="<?php echo $image;?>" height="52" width="102" /></li> <?php } } } ?> </ul> </div> <a class="pnext" style="float:right; width:10px; height:60px; margin-top:10px;" href="javascript:void(0)"></a> <script type="text/javascript"> jQuery(function() { jQuery(".player").jCarouselLite({ btnNext: ".pnext", btnPrev: ".pprev", speed: 300, visible: 5 }); }); </script> </div> <?php } It is an absolute mess Thank you. Hello, I am a newbie for Javascript. Currently I am doing a website which consists of a lot of contents. Therefore, I hope to get a solution which all my contents are arranged into a table (rows and columns). The condition is that there is only a html page to hold all the contents where there is a "view more" or 'next" button at the bottom and each times user can click to go to the different contents. I have tried to use the innerHTML and I was able to do for 2 pages only...Now I encountered a problem which I need to update more contents to more pages . Can you kindly give some guidelines according to this? Below shows the example code of my website: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="JavaScript" type="text/javascript"> function OpenWindow() { var content=document.getElementById('achieve').rows[0].cells; content[1].innerHTML="<br/><div align='justify' class='style1 style8'><span class='style11'>Another content</span></div>" + "<div align='left' class='style23 style13'>more details</div>"; var content=document.getElementById('achieve').rows[1].cells; content[1].innerHTML=""; var content=document.getElementById('achieve').rows[2].cells; content[1].innerHTML="<strong><em><font class=style13 style23 color=#FF6600><a href='test.html'>back</a></font></em></strong>"; } </script> </head> <body> <!--id starts--> <table id="achieve" width="780" height="387" border="0"> <tr> <td width="10" height="39"> </td> <td width="340"><div align="center" class="style6">My Title</div></td> <td width="416"> </td> </tr> <tr> <td> </td> <td><div align="justify" class="style1 style8"><span class="style11">More Contents here</span></div></td> <td> </td> </tr> <tr> <td> </td> <td><div align="right"><strong><em><font class="style23 style13" color="#FF6600"><a href="#" onclick="OpenWindow()">+ view more </a></font></em></strong></div></td> <td> </td> </tr> </table> </body> </html> Can somebody explain me why this isn't working? Code: <SCRIPT TYPE="TEXT/JAVASCRIPT"> // Check lotto var goed = frmTrekking.EersteGetal.value var fout = frmGetallen.Opgegeven_1.value function checkLotto() { if (frmTrekking.EersteGetal.value == frmGetallen.Opgegeven_1.value) { document.getElementById('boldStuff').style.color='#00ff00'; document.getElementById('boldStuff').innerHTML = goed; } else { document.getElementById('boldStuff').style.color='#ff0000'; document.getElementById('boldStuff').innerHTML = fout; } } </script> When I don't use the var, but give for example this: it works ok. Code: document.getElementById('boldStuff').innerHTML = '6'; Does anyone have any suggestions as to how I can get IE working properly with this? It's a, (exempting IE), straight forward line numbering and plain text code view function. When using the line numbering portion, it works fine in Moz based browsers etc, as it does in IE for the initial numbering. On trying to remove the numbers though, (on the second call), IE just seems to cascade the list entries rather than removing them. Code: function process_code(id, number, print) { if (document.getElementById(id)) { var current = document.getElementById(id); var code = current.innerHTML.split('\n'); var count = 0; var xcount = 0; if (number) { if (current.innerHTML.indexOf('<li class="code-entry">') != -1) { code = code.join('\n'); code = code.replace(/\<\/(li\>\<\/ol|li)\>/ig, '\n'); code = code.replace(/\<ol\>\<li[^\>]+\>|\<li[^\>]+\>/ig, ''); current.innerHTML = code.replace(/^\n+|\n+$/g, ''); } else { current.innerHTML = '<ol><li class="code-entry">'+code.join('</li><li class="code-entry">')+'< /li></ol>'; } } else { var doc = window.open('', 'code_print'); var newdoc = doc.document; newdoc.open('text/plain'); newdoc.write(decode_code(code.join('\n'))); newdoc.close(); if (print) { if (navigator.userAgent.indexOf('Opera') != -1) { window.print(); } else { doc.print(); } doc.close(); } } } } Hey, for some reason, this isn't working because of the src="images/edit.png" attribute. Here is my code: Code: <a href="#" onclick="change('HEYYY')"><img src="images/edit.png" alt="Edit" id="edit1" /></a> Javascript (External) Code: function change(message) { document.getElementById('edit1').innerHTML = '<input type="text" value="'+message+'" />'; } It does nothing. But if I take the src attribute out, it works fine. Any help? Thanks. How would you make a if for a input box =this do this Some if the input boxe value = this then get innerHTMl I trying to display a random number using innerHTML Here's my code: Code: <html> <head> <script language="JavaScript"> var myArray = new Array("String1", "String2", "String3", "String4", "String5", "String6", "String7", "String8", "String9", "String10"); var num = Math.floor(myArray.length * Math.random()); document.writeln(myArray[num]); //document.getElementById("myString").innerHTML = myArray[num]; </script> </head> <body> <div id="myString"></div> </body> </html> it works when I use document.writeln(myArray[num]); but does NOT work for document.getElementById("myString").innerHTML = myArray[num]; any ideas?? tks I'm working on a script that inserts things into tables. It's complicated and involves xmlhttp and lots of stuff, but I've narrowed the problem down to something simple. The following code does not work in IE. It doesn't generate an error, but simply displays nothing. Here is the code: Code: <body> <table id="test"> </table> <script type="text/javascript"> document.getElementById('test').innerHTML = '<tr><td>test<\/td><\/tr>'; </script> </body> I have no idea why it isn't working as it works in Safari and Firefox. Help is much appreciated. Julian since there are troubles with innerHTML in IE ..... instead of : Code: target.innerHTML = src.innerHTML; --> Code: this.copy_innerHTML = function(src,target) { //remove all target inner elements while(target.hasChildNodes()){target.removeChild(target.childNodes[0])} for (var j = 0; j<src.childNodes.length-1; j++) { target.appendChild(src.childNodes[j].cloneNode(true)); } } a) Tested in FF and GC b) in IE this works, but stuff does not appear where it should. EDIT: if text nodes removed , then even in ff does not work, does not find textarea inside target node. That is, the error pops up, previously only notable at IE. HTML & CSS validation is OK. Any advice ? Hello everyone, My problem consist in that I want to avoid re-loading the whole page, and only re-load the portion of the website that needs to be. Similar to listed below; website Banner (Solid) Menu bar (Solid) Div content (Changeable) The main problem is that no matter what I do, I can't make the innerHTML cover the whole <div> </div> It remains the same very small size, no matter what I put within the div. Far from its full size potential (plenty of space left). Head script Code: PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <script type="text/javascript"> //<![CDATA[ // written by: Coothead function updateObjectIframe(which){ document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>'; } //]]> </script> <link rel="stylesheet" type="text/css" href="main_stylesheet.css" media="screen, projection" /> </head> Here is the html portion. PHP Code: <div id="one" style="background-color:#C0C0C0;position:relative;height:2000px;width:800px;float:left;"></div> Here is the link placed elswhere on the website (The solid menu bar) PHP Code: <li><a href="http://www.google.com" onclick="updateObjectIframe(this); return false;">Forums</a></li> It's not Google that I want to use, however a PHPBB forum. But I found that the same problem occurs on no matter what I put in this innerhtml, the javascript gets limited to the same little box in the upper left corner of my div. Can't change size, no matter what I tried to do. I'm suspecting it has something to do with CSS, however I spended a whole night (and now day) trying to work this out, I really don't get much further. I realize I should spend a couple of more nights when new to JS, however this kind script I consider like a foundation to a house, it's important before moving on with learning, maybe I'm wrong though. Anyone who can help with this issue? Would be very much appreciated, Thank you! 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."); } } } Hello. I'm trying to change the text on my page dynamically using getElementById etc. Just not quite sure how to do it. Code: <script> function changeIt() { document.getElementById('change').innerHTML = '*i want the stuff below here (from 'var' to 'text')*'; } var Result= ((correct / 5) * 100) + '%'; document.write('<p>Result<b>' + score + '</b></p>'); document.write('<p>some text</p>'); </script> // <div id = "change"> *all the info I'm going to replace* </div> Just need to know how to put the variables and stuff in the 'innerhtml' part? Thanks. I can't seem to get my innerHTML to display my content. This works fine, if I was to put it all in one line. Code: document.getElementById('addedText').innerHTML = '<table><tr><td>'+"My text goes here"+'</tr></td></table>'; If I was to break it up, which I wanted then nothing seem to show up. Code: document.getElementById('addedText').innerHTML = '<table><tr><td>'; document.getElementById('addedText').innerHTML = "My text goes here"; document.getElementById('addedText').innerHTML = '</tr></td></table>'; Here's my code Code: <html> <head> <script type="text/javascript"> function display() { document.getElementById('addedText').innerHTML = '<table border=1><tr><td>'; document.getElementById('addedText').innerHTML = "My text goes here"; document.getElementById('addedText').innerHTML = '</tr></td></table>'; } </script> </head> <body onload="display()"> <div id="addedText"></div> </body> </html> thanks Hello all i've made Contact me form with JS validation , my qs is : i do not want the alert pop up small window a post text the alert in DIV i have read it's innerHTML here the JavaScript Code: function isEmpty( inputStr ) { if ( null == inputStr || "" == inputStr ) { return true; } return false; } // Vadate name function checkname (strng){ var error=""; if (strng == ""){ error = "Please Enter your name." } return error; } //Vadate last name function checkprename (strng){ var error=""; if (strng == ""){ error = " Please Enter your name" } return error; } function checkPhone (strng) { var error = ""; if (strng == "") { error = "Vous n'avez pas inscrit un numero de telephone.\n"; } var stripped = strng.replace(/[\(\)\.\-\ ]/g, ''); //strip out acceptable non-numeric characters if (isNaN(parseInt(stripped))) { error = "vous entrez le numero de telephone errone."; } if (!(stripped.length == 10)) { error = "vous entrez le numero de telephone errone.\n"; } return error; } //Validate Email function checkEmail (strng) { var error=""; if (strng == "") { error = "Vous n'avez pas entre une adresse email.\n"; } var emailFilter=/^.+@.+\..{2,3}$/; if (!(emailFilter.test(strng))) { error = "S'il vous plait entrer une adresse email valide.\n"; } else { //test email for illegal characters var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ if (strng.match(illegalChars)) { error = "L'adresse email contient des caracteres illegaux.\n"; } } return error; } Now here in html Code: function checkWholeForm(theForm) { var why = ""; why += checkname(theForm.name.value); why += checkprename(theForm.prename.value); why += checkEmail(theForm.Email.value); why += checkPhone(theForm.Phone.value); if (why != "") { var leDiv = document.getElementById('errormsg'); var nouveauDiv = document.createElement('div'); var divIdName = 'errormsg'; nouveauDiv.setAttribute('id',divIdName); nouveauDiv.innerHTML = "u had Enter wrong information bla bla"; leDiv.appendChild(nouveauDiv); var nouveauDiv2 = document.createElement('div'); var divIdName = 'errormsg'; nouveauDiv2.setAttribute('id',divIdName); nouveauDiv2.innerHTML = ' '; leDiv.appendChild(nouveauDiv2); return false; } return true; } MY qs is how to let the innerHTML past past each error from the validate.js file which i call it erorr i mean near to input filed of phone it will be div id erorrmsg and in this div will past the error from the validate.js which it code from my start of this post thanks for advance Hey everyone, I'm struggling to get this to work, I have a countdown timer with the timer itself declared as, 'out'. This is then set as the content for a div using: Code: document.getElementById(iid).innerHTML=out; My code basically says, if the countdown timer hasn't finished, do the above, if however it has reached the end, set the contents of the div to something else. What I need to do is add an image above the timer which disappears with it when it reaches 0, so essentially, I need to be able to do something like the following (except obviously in the correct syntax, if it exists). Quote: document.getElementById(iid).innerHTML="<img src='images/dateheader.png'><br>" out; Is this possible? Thanks hi, i have a problem with innerHTML if i wrote document.getElementById('someid').innerHTML = "ok"; then it wroks but when i wrote document.getElementById('someid').innerHTML = "<sometext> ok"; it does not work. i.e. <sometext> is not visible if check on firebug / dom it display.. <sometext> ok </sometext> please help.. how do i print / display above string as it as. you may download file or check below link.. please click here |