JavaScript - Javascript Code In Innerhtml
hi guys, i am new to javascript and have a problem:
I have an empty combobox, and two buttons. What i am trying to do is; adding 2 elements in to te combo box when i click on the button1. And i want to change these values with something else when i hit the button2. So far i can fill the combo box but i can not change the values when i click on the second button. Here is my code: Code: [HTML]<html> <head> <script type="text/javascript"> function ce(str) { document.getElementById("end").innerHTML= "mySel.appendChild(document.createElement('option')).text=\""+str+"\";"; } </script> </head> <body> <h1>TryIt</h1> <select id="mySel"><script id="end"></script></select> <input type="button" value="Add" onclick="ce('try');"> <input type="button" value="Add2" onclick="ce('try again');"> </body> </html>[/HTML] I want to do this with javascript and using appendChild. If i try to send <option> tags within innerhtml it works but not whis way. why isnt it working? Similar TutorialsI am ripping my hair out trying to figure out why my innerHTML code is not working. It only works in IE, but keeps failing in Chrome and Firefox. I am using a form text field for customers to enter a Gallery ID (text value in the form field) which I have set up for them in an external js file. I use this code to change the content of div's after it checks the js file for a matching text value. Here is what is happening-- the proper content shows up for a second in Chrome or Firefox if the username value matches, but it pops away really fast and goes back to the login field prompt. Javascript: Code: <head> <script type="text/javascript"> function setinitialvalues(){ document.getElementById('loginblock').style.visibility = 'visible'; document.getElementById('galleryinfo2').style.visibility = 'hidden'; document.getElementById('expiredmessage').style.visibility = 'hidden'; document.getElementById('republish').style.visibility = 'hidden'; document.getElementById('logoutmessage').innerHTML = ""; document.getElementById('logoutmessage2').innerHTML = ""; document.getElementById('logoutmessage').style.visibility = 'hidden'; document.getElementById('logoutmessage2').style.visibility = 'hidden'; } </script> <script type="text/javascript"> function loadcustomer(){ document.getElementById('galleryinfo').innerHTML = ""; document.getElementById('galleryinfo2').innerHTML = ""; document.getElementById('expdatemessage').innerHTML = ""; document.getElementById('expiredmessage').innerHTML = ""; document.getElementById('republish').innerHTML = ""; document.getElementById('logoutmessage').style.visibility = 'hidden'; document.getElementById('logoutmessage2').style.visibility = 'hidden'; document.getElementById('loginblock').innerHTML = "<br /><h4>If you know your Gallery ID, you can enter it here to access your proofing gallery and order page.<br /><br />ENTER GALLERY ID:</h4><form name='form' action='' method='post'><input style='color:#000;' name='username' id='username' onfocus='clearinvalid()' onKeyDown='clearinvalid()'><br /><br /><input style='background-color:#33A1C9;' class='button' id='submitbutton' type='submit' value='Submit' onClick='return galleryid(this.form)'></form><h4><div style='color:#ff0000;' id='invalidmessage'></div></h4><br />Sample Gallery ID: demo<br />(Then click the Submit button. Some browsers do not accept the Enter key.)<br /><br /><a href='#' class='btn btn-lg btn-default'>Back to Menu</a><br /><br />This works on Internet Explorer, Firefox, Opera and Google Chrome. Please use one of these web browsers to log in."; document.getElementById('loginblock').style.visibility = 'visible'; } </script> <script language="javascript" type="text/javascript" src="customergallery.js"></script> </head> HTML: Code: <div style="text-align:center;" id="loginblock"></div> <div id="galleryinfo"></div> <div id="galleryinfo2"></div> <div style="color:#ff0000;" id="expdatemessage"></div> <div style="color:#ff0000;" id="expiredmessage"></div> <div id="republish"></div> <div id="logoutmessage"></div> <div id="logoutmessage2"></div> External customer js file: Code: function Submit(){ if(event.keyCode == 13) { galleryid(); return false; } } function galleryid(){ if (document.getElementById('username').value == 'demo') { var name = "My Photomatic Photo Session"; var sessiondate = "02/22/2014"; var location = "Any town, USA"; var orderlink = "<a href='../../accounts/brown/20140222/myphotomatic20140222.html' target='_blank'>CLICK HERE TO VIEW GALLERY</a>"; var todayDate = new Date(); var expdate = new Date(2015,05,30); comparedate(); } else if (document.getElementById('username').value == '') { document.getElementById('invalidmessage').innerHTML = 'Please enter a value in this field.'; } else { document.getElementById('invalidmessage').innerHTML = 'Invalid Gallery ID. Please try again.'; } document.getElementById('username').value = ""; return false; function comparedate() { if (todayDate >= expdate) { document.getElementById('galleryinfo2').innerHTML = "<br /><br />" + name + "<br />Session Date: " + sessiondate + "<br />" + location + "<br /><br />"; document.getElementById('expiredmessage').innerHTML = "This gallery has expired on " + (expdate.getMonth()+1) + "/" + expdate.getDate() + "/" + expdate.getFullYear(); document.getElementById('republish').innerHTML = "<br />If you would like to have this gallery republished, please email me .<br /><br />"; document.getElementById('logoutmessage2').innerHTML = "<a href='javascript:void(0);' onclick='loadcustomer(); clearusername(); setinitialvalues();' class='btn btn-lg btn-default'>Click here to return to the Login</a><br /><br />"; document.getElementById('galleryinfo2').style.visibility = 'visible'; document.getElementById('expiredmessage').style.visibility = 'visible'; document.getElementById('republish').style.visibility = 'visible'; document.getElementById('logoutmessage2').style.visibility = 'visible'; document.getElementById('loginblock').innerHTML = ""; document.getElementById('loginblock').style.visibility = 'hidden'; } else { loadcustomer(); document.getElementById('galleryinfo').innerHTML = "<br /><br />" + name + "<br />Session Date: " + sessiondate + "<br />" + location + "<br /><br />" + orderlink + "<br /><br />"; document.getElementById('expdatemessage').innerHTML = "This gallery will expire on " + (expdate.getMonth()+1) + "/" + expdate.getDate() + "/" + expdate.getFullYear() + ".<br /><br />"; document.getElementById('logoutmessage').innerHTML = "<a href='javascript:void(0);' onclick='loadcustomer(); clearusername(); setinitialvalues();' class='btn btn-lg btn-default'>Click here to return to the Login</a><br /><br />"; document.getElementById('logoutmessage').style.visibility = 'visible'; document.getElementById('loginblock').innerHTML = ""; document.getElementById('loginblock').style.visibility = 'hidden'; } } } function clearinvalid(){ document.getElementById('invalidmessage').innerHTML = ''; } function clearusername(){ document.getElementById('username').value = ""; } Where am I going wrong and what can I do to make this work in Chrome and Firefox? It works great in IE. Thanks! Hello, I am using AJAX and got the output from AJAX like the below line Ajax function Code: if (http_request.readyState == 4) { if (http_request.status == 200) { var_output = http_request.responseText; document.getElementById('result').innerHTML = var_output; //value 100 displayed } else { alert('There was a problem with the request.'); } } In my javascript function, i need to get the value 100 from that innerHTML. Is it possible to get this value? Code: // I tried this way, but not working var txt = document.getElementById('result').innerHTML; or Store it in hidden field and get the value from javascript. Please suggest any idea to solve this problem Thanks I'm currently working on an HTML executor and would like users to be able to put javascript in their code if they wish to do so. Currently I have their input sent to an iframe via document.body.innerHTML. The problem, though, is that user submitted javascript doesn't work (with the exception of anything placed in the onload attribute of an image). Any suggestions?
Hi , I am inserting an image into a span tag by click on button and resize the image using resize_image_height_weight function. I am using two function to do this task. setImage setImage_w3Validation setImage function resize the image but fail on w3validation on my webpage( As per w3c there is no attribute onload for image tag.) To fix out this issue I am using setImage_w3Validation function which pass on w3validation but unable to call resize_image_height_weight function. My purpose is to resize the image. Kindly suggest me how to do it? <html> <head> <script TYPE="text/javascript" language="javascript"> function resize_image_height_weight(id, hgt, wdth){ //alert(id); Obj=document.getElementById(id); myImage = new Image(); myImage.src = Obj.src; var heights = myImage.height; var widths = myImage.width; // alert("Height=>" + heights + " Width=> " + widths); if(heights > hgt || widths > wdth) { if(heights > widths) { var temp = heights/hgt; var new_width = widths / temp; new_width = parseInt(new_width); heights = hgt; widths = new_width; } else { var temp = widths/wdth; var new_height = heights / temp; new_height = parseInt(new_height); heights = new_height; widths = wdth; } } Obj.height = heights; Obj.width = widths; } function setImage(){ document.getElementById("IM0").innerHTML ="<center><img src=\"http://www.google.co.in/intl/en_com/images/srpr/logo1w.png\" id=\"img1\" alt=\"\" height=\"125\" width=\"125\" onload=\"resize_image_height_weight('img1',125,125);\"><\/center>"; } function setImage_w3Validation(){ document.getElementById("IM1").innerHTML ="<center><img src=\"http://www.google.co.in/intl/en_com/images/srpr/logo1w.png\" id=\"img2\" alt=\"\" height=\"125\" width=\"125\"><script type=\"text/javascript\">document.getElementById('img2').onload = function(){resize_image_height_weight('i12',125,125);};<\/SCRIPT><\/center>"; //I wanna to do the task using this one function to resize img for w3validation } function clear_page(){ document.getElementById("IM0").innerHTML =""; document.getElementById("IM1").innerHTML =""; } </script> </head> <body> <div class="img3"><span id="IM0"></span></div> <div class="img3"><span id="IM1"></span></div> <input type="button" name="btn1" value="Image Onload W3C Fail" onclick="setImage();"> <input type="button" name="btn2" value="Image Onload W3C Pass" onclick="setImage_w3Validation();"> <input type="button" name="btn2" value="Clear" onclick="clear_page();"> </body> </html> 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> 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 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(); } } } } 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'; Hello. I have the following: bottomCell.innerHTML = "apples 0"; bottomCell.innerHTML.replace("apples", "oranges", "gi"); The first line works fine, the second one doesn't. In the end, I want it to replace all instances of the numerical variable named myNumber to the string "t" + newNumber (where newNumber is another numerical variable) but neither this, nor the above mentioned line work. Any ideas? Thanks! Hello all. I'm new here and new to JavaScript. Ive got a snippet of code that's not working. Can you guys help me out? The code is the following: Code: function image() { var image = document.getElementById('add_image'); image.style.height = '30px'; image.innerHTML = '<div style="margin:5px; width:520px; height:20px;" id="add_images"><input type="file" name="pic" /></div>'; } The first half of the function is working, but the second half isn't. I originally tried style.visibility = 'visible' but that didn't work so I try innerHTML. Since that didn't work either, I've decided to seek help. Thanks ahead of time. Hello all, I'm trying to lern javascript, but my knowledge doesn't cover what I want, so I could use some help. I'm trying to make a lotto check form for our family. What it as to do is check the numbers(B) with numbers(A) Code: <SCRIPT TYPE="TEXT/JAVASCRIPT"> // Check lotto function checkLotto() { var goed = frmTrekking.EersteGetal.value var fout = frmGetallen.Opgegeven_1.value 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> Code: <body onload="checkLotto();"> <form id="frmGetallen" name="frmGetallen" method="post" action=""> <table width="100%" border="0" cellspacing="5" cellpadding="5"> <tr> <td width="9%"><strong>A</strong></td> <td width="6%"><strong>Naam</strong></td> <td width="10%"><strong>1</strong></td> <td width="10%"><strong>2</strong></td> <td width="10%"><strong>3</strong></td> <td width="10%"><strong>4</strong></td> <td width="10%"><strong>5</strong></td> <td width="10%"><strong>6</strong></td> <td width="10%"><strong>7</strong></td> <td width="10%"><strong>8</strong></td> <td width="10%"><strong>9</strong></td> <td width="10%"><strong>10</strong></td> </tr> <tr> <td><strong>1</strong></td> <td><strong>Joop</strong></td> <td><b id='boldStuff'><input name="Opgegeven_1" type="hidden" id="Opgegeven_1" value="6" size="5" /> </b></td> <td><b id='boldStuff'><input name="Opgegeven_2" type="hidden" id="Opgegeven_2" value="8" size="5" /></b></td> <td><b id='boldStuff'><input name="Opgegeven_3" type="hidden" id="Opgegeven_3" value="16" size="5" /></b></td> <td><b id='boldStuff'><input name="Opgegeven_4" type="hidden" id="Opgegeven_4" value="18" size="5" /></b></td> <td><b id='boldStuff'><input name="Opgegeven_5" type="hidden" id="Opgegeven_5" value="26" size="5" /></b></td> <td><b id='boldStuff'><input name="Opgegeven_6" type="hidden" id="Opgegeven_6" value="28" size="5" /></b></td> <td><b id='boldStuff'><input name="Opgegeven_7" type="hidden" id="Opgegeven_7" value="32" size="5" /></b></td> <td><b id='boldStuff'><input name="Opgegeven_8" type="hidden" id="Opgegeven_8" value="36" size="5" /></b></td> <td><b id='boldStuff'><input name="Opgegeven_9" type="hidden" id="Opgegeven_9" value="38" size="5" /></b></td> <td><b id='boldStuff'><input name="Opgegeven_10" type="hidden" id="Opgegeven_10" value="41" size="5" /></b></td> </tr> </table> </form> <form id="frmTrekking" name="frmTrekking" method="post" action=""> <label></label> <table width="58%" border="0" cellspacing="5" cellpadding="5"> <tr> <td width="7%"><strong>B</strong></td> <td width="10%"><input name="EersteGetal" type="text" id="EersteGetal" value="6" size="5" /></td> <td width="10%"><input name="TweedeGetal" type="text" id="TweedeGetal" value="12" size="5" /></td> <td width="10%"><input name="DerdeGetal" type="text" id="DerdeGetal" value="20" size="5" /></td> <td width="10%"><input name="VierdeGetal" type="text" id="VierdeGetal" value="32" size="5" /></td> <td width="10%"><input name="VijfdeGetal" type="text" id="VijfdeGetal" value="5" size="5" /></td> <td width="10%"><input name="ZesdeGetal" type="text" id="ZesdeGetal" value="15" size="5" /></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </form> What I have now is the check between 2 numbers, I need to have it checked all, so all the B numbers have to be checked with all the A numbers. I think i'll need a sort of loop in a array, but I really don't know how to do this. Can somebody help me with this please? 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 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."); } } } 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 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 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. 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. |