|
JavaScript - Document.innerhtml Question...
Code:
function writeCmd()
{
// var div = top.buttonFrame.document.getElementById("buttonList");
for(i=0;i<arrCtr;i++)
{
top.buttonFrame.document.getElementById('buttonList').innerHTML = '<input type="Button" value="' + buttonTXT[i] + '" id="' + buttonIDS[i] + '" name="' + buttonIDS[i] + '" class="submenu_special" onclick="top.contentFrame.document.forms[0].submit()" /><br />';
}
}
So I have a basic function here, and it works... except for one thing... My arrays have multiple elements, and innerHTML only lets one button get written (the last)... How can I append, vs. replacing with this function? Similar TutorialsI need help creating something hard. First I need to divs that change by ONE button and when they change they say two different things and must be onclick. The other thing is there will be 4 buttons. They start black and when you click one it turns grey and when you click another it turns gray and the other one that was last clicked turns back black and same with the other two. Hi All, Im trying to get my simple js code to add some code to the html page but cant seem to (i get an error in html page); my JS code: Code: function game() {
this.document.getElementById('modalone').innerHTML = "<b style='float: left; text-decoration: underline;'>Deady Teddy</b><img
src='css/images/popup/close.png' style='float: right; cursor: hand;' onClick='javascript: hideModal('modalPage');'></img>";
}
my html code to call this: Code: <div class="gbox"><img src="css/images/games/dt.gif" />
<a href="javascript: revealModal('modalPage'); game();">Deady Teddy </a>
</div>
Any Idea's? Thanks In Advance, Jamie. 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 want the result of a fileld to appear bellow the form and not in a new blank page (witch happens when you have document.write?). I guess it has something to do with "innerHTML"? Can anyone of you help me to make the result of this IF to appear bellow the form? if (document.Form.TypedInField.value == "The Cable Guy") { document.write("You just wrote a title of a nice movie") } I have the form and everything works perfect, except of that the result of what the user have wrote (beacuse of docuemnt.write) land in blank window. I would be very happy of any of you could solve this for me Hey all! Got a question I can't seem to find an answer to. I have a little JS app that is a glorified calculator which I posted the code for below. My code uses the document object to replace the html in the "content" <div> and works great. However, I want to add an inline style in order to change the background of the input (readonly field with an id of "coutput") based on either of the global variables named "MJPD" or "IJPD", (depending on the switch case selected in the user prompt at the beginning of the script.) Simplified....if the value of MJPD is less than 4.6, I want the "coutput" field's background to be red, else be green. The same goes for IJPD, except the threshold for red will be <3.83. Code and what I have tried is below. After reading the code, look below it to see what I have tried and maybe tell me what I'm doing wrong! =) Any help is greatly appreciated.......I have spent a week searching for this little answer and I can't seem to find it! Code:
<script language="JavaScript">
var MJPD = 1;
var IJPD = 1;
function sayhello(){ // *** live test for inline JS code placement
alert("IT WORKS!!! Now change me =)");
}
//////////////////////////////////////////////////////
function changeScreenSize(w,h)
{
window.resizeTo( w,h )
}
///////////////////////////////////////////////////
function iJPDCalc(form) //calculate IJPD value
{
var ij = parseFloat(form.IJobs.value, 10);
var it = parseFloat(form.ITime.value, 10);
var IJPD = 0;
IJPD = (ij / it) * 8.0;
form.I_JPD.value = IJPD;
}
/////////////////////////////////////////////////////
function mJPDCalc(form) //calculate MJPD value
{
var mj = parseFloat(form.MJobs.value, 10);
var mt = parseFloat(form.MTime.value, 10);
var MJPD = 0;
MJPD = (mj / mt) * 8.0;
form.M_JPD.value = MJPD;
}
/////////////////////////////////////////////////////
function ijpdcolor() //set bg color of coutput based on IJPD's value
{
if (IJPD >= 3.83) {
return ("green");
}
else {
return ("red");
}
}
/////////////////////////////////////////////////////
function mjpdcolor() //set bg color of coutput based on MJPD's value
{
if (MJPD >= 4.6) {
return ("green");
}
else {
return ("red");
}
}
/////////////////////////////////////////////////////
function startVZT3(){
var n=0;
n=prompt("What would you like to do? 1: Calculate IJPD 2: Calculate MJPD 3: Exit", "Enter a value from 1-3")
switch(n)
{
case(n="1"):
document.getElementById("content").innerHTML='<FORM><h2>Combined IJPD Calculator</h2><p>Install components completed today:</p><INPUT NAME="IJobs" VALUE="3.84" MAXLENGTH="10" SIZE=10><p>Hours taken to the jobs:</p><INPUT NAME="ITime" VALUE="8" MAXLENGTH="10" SIZE=10><h4> Click the button to calculate your IJPD:</h4><INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON class="cbutton" onClick=iJPDCalc(this.form)><p>Your current combined IJPD for today is:</p> <INPUT NAME="I_JPD" class="output" style=" " id="coutput" READONLY SIZE=10></FORM>';
break
case(n="2"):
document.getElementById("content").innerHTML='<FORM><h2>Combined MJPD Calculator</h2><p>Trouble components completed today:</p><INPUT NAME="MJobs" VALUE="4.6" MAXLENGTH="10" SIZE=10><p>Hours taken to the jobs:</p><INPUT NAME="MTime" VALUE="8" MAXLENGTH="10" SIZE=10><h4> Click the button to calculate your MJPD:</h4><INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON class="cbutton" onClick=mJPDCalc(this.form); mjpdcolor();><p>Your current combined MJPD for today is:</p> <INPUT NAME="M_JPD" class="output" style=" " id="coutput" READONLY SIZE=10></FORM>';
break
case(n="3"):
alert('This page will now close...');
window.close();
break
default:
document.getElementById("content").innerHTML='<h1 style="padding-top: 40px; color: red;">You need to enter a value! Please try again...</h1>';
break
}
}
///////////////////////////////////////////////////////
</script>
</head>
<body onload="changeScreenSize(825,775)">
<div id="wrapper">
<div id="sub_wrapper">
<br />
<br />
<input type="button" class="button" onclick="startVZT3()" value="Start VZT3 Web!" />
<br /><br />
<div id="content">
<h3 style="padding-top:60px;">VZT3</h3>
</div>
</div>
<script type="text/javascript"> <!-- trying script to ensure function and dynamic update of this value - doesnt work 2/3/2010 -->
document.write(mjpdcolor());
</script>
</div>
</body>
OK, so on the last line of each case statement where it injects html code into the content div, in this code style=" background: ** ** " and in between the ** ** marks, I have added such things as <script type="text/javascript">document.write(mjpdcolor())</script> (or ijpdcolor, depending on which case I am working with). Theoretically, this should pull the value of MJPD (or IJPD), evaluate it for the if statement, then return the value of red or green and set the value of the background dynamically - but of course it doesnt. I have also tried different inline styles and even adding the css id and trying to link it to the mjpdcolor() function, but all to no avail. Can someone help me please?? Thanks everyone, your awesome! Quote: <html> <head> <script type="text/javascript"> var a = january var b = febuary var c = march function test() { document.getElementById("test").innerHTML=a; <!-- needs to be A on first function click, b on second, c on third, etc..^^--> } </script> </head> <body> <p id="test"></p> <!-- the <p> should go to next month upon each function --> <input type="button" value="asdf" onclick="test()" /> </body> </html> I tried to explain it pretty well in the comment tags, thanks! Hi, I got the following script to work the way I want it by adding new text inputs with new name values, but if there is data added and the add button is clicked again everything disappears. Is there any way to keep the data from going AWAL? Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script>
var counter = 0;
function generateRow() {
counter += 1;
var d=document.getElementById("add_new");
d.innerHTML+="<p><input type='text' name='new_item" + counter + "'>";
}
</script>
</head>
<body>
<form id="form1" name="form1" method="get" action="">
<div id="add_new"></div>
<p><input type="button" value="Add" onclick="generateRow()"/></p>
<p>
<label>
<input type="submit" name="Submit" value="Submit" />
</label>
</p>
</form>
</body>
</html>
Thanks much! EDIT: I was looking on Google and saw a JQuery method of doing it if someone has an idea of how to get this one to hold up.. 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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
var counter = 2;
$("#add").click(function () {
if(counter==11){
alert("Too many boxes");
return false;
}
$("#textBoxes").html($("#textBoxes").html() + "<div id='d"+counter+"' ><label for='t2'> Textbox "+counter+"</label><input type='textbox' name='t"+counter+"' id='t"+counter+"' > </div>\n");
++counter;
});
$("#remove").click(function () {
if(counter==1){
alert("Can u see any boxes");
return false;
}
--counter;
$("#d"+counter).remove();
});
});
// --></script>
</head>
<body>
<form id="form1" name="form1" method="get" action="">
<div id='textBoxes'>
<div id='d1' ><label for="t1"> Textbox 1</label><input type='textbox' name='t1' id='t1' ></div>
</div>
<input type='button' value='add' id='add'>
<input type='button' value='remove' id='remove'>
<br/>
<input type="submit" name="Submit" value="Submit" />
</form>
</body>
</html>
Thanks again I was playing around with some onmouseover/onmouseout and setting innerHTML to various strings depending on what has been mousedover/out. The DIV for the innerHTML was above the items being onmouseovered/out and because the strings sent were of different lengths, sometimes a one or two line wrap would happen and everything below it would be resized accordingly creating a horrible effect. For reference, what is a good way to approach building pages which are immune to this effect? Hello, I have the following code, which I plan on using the datepicker with, however the code currently hangs up on the script references, as to my knowlege it looks ok, and I can't seem to find anything wrong with it: Code:
<html>
<head>
<script>
function open_cal() {
var str_html = ""
+ "<!DOCTYPE html>"
+ "<html lang='en'>"
+ "<head>"
+ "<meta charset='utf-8'>"
+ "<title>CALENDAR</title>"
+ "<link href=jq/jquery-ui.css rel=stylesheet type=text/css/>"
+ "<script src=jq/jquery.min.js type=text/javascript></script>"
+ "<script src=jq/jquery-ui.min.js type=text/javascript></script>"
+ "</head>"
+ "<body>"
+ "<p>Hello test</p>"
+ "</body>"
+ "</html>"
var j = window.open("","CALENDAR","width=200,height=250,status=no,resizable=yes,top=200,left=200")
j.document.write(str_html);
j.document.close();
}
</script>
</head>
<body>
<input onclick="open_cal()" type="button" value="Open" name="B1">
</body>
</html>
I need your help. Any ideas? Thanks very much in advance, J Hi I am trying to make a function run if the mouse is moved over the document but when using the object onmousemove it seems to run the code even if the mouse is still over then document, how can I make it so if the mouse is over the document but isn't moving then don't run the code but once the mouse moves run the code? This is the code I made to handle the mouse move collections. Code: function onmove(func) {
var oldonmove = document.onmousemove;
if(typeof document.onmousemove != 'function') {
document.onmousemove = func;
} else {
document.onmousemove = function() {
oldonmove();
func();
};
}
}
And to use it you would do this. Code: <script type="text/javascript">
/* Alert A Message Everytime The User Moves Their Mouse */
onmove(function(){ alert('You Moved!'); });
</script>
But with this code it runs even when the user doesn't move their mouse and the notification box pops up every second as the code seems to think a still mouse is a moving mouse. I was thinking about having a run once system but that would mean if the mouse moves it runs once and then if the mouse moves again the code will not run as it has already ran before. If anyone can help me please reply, Thank You. DJCMBear. Hello everyone, I am new I found this site while searching for help with my problem. I'm new to javascript and having a very hard time with the document.write. Can anyone tell me why I'm getting this error? Error: missing ) after argument list Source File: file:///G:/CINS%20157/tutorial.12/case1/clist.htm Line: 79, Column: 58 Source Code: document.write("<th id='sumTitle' colspan='2'>" Summary "</th>"); Then there is an arrow pointing between the S and u in Summary. Even if you could just tell me where to look for help with the answer that would be greatly appreciated. If it helps this is the code it is attached to: <script type="text/javascript"> document.write("<table border='1' cellspacing='1'>"); document.write("<tr>"); document.write("<th id='sumTitle' colspan='2'>" Summary "</th>"); document.write("</tr>"); document.write("<tr><th>" Contributors "</th>"); document.write("<td>"+amount.length+ "</td></tr>"); document.write("<tr>") document.write("<th>"); document.write(Amount); document.write("</th>"); document.write("<td>"+amountTotal()+"</td>"); document.write("</tr>"); document.write("</table>"); </script> Thanks in advance for any help you can give me. I really appreciate it. My code is here and it works ... However, I would like my dynamic table to show on the same page as my body and not on a new blank page. I have created a DIV and try playing around with the document.getElementById('monTab').innerHTML but it's not working out for me ... What am i missing ? Regards, Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>new Script - Javascript Cours 11</TITLE>
<META content="text/html"; charset="UTF-8" http-equiv="content-type">
<SCRIPT type="text/javascript">
function createTable(){
var Etudiant = new Array(Number(prompt("How many Students will you put in ?","")));
document.write("<table border=\"1\">");
for (var i=0; i<Etudiant.length; i++) {
Etudiant[i] = window.prompt("S'il vous plait entrez le nom d'un etudiant " + (i+1) + ".","")
alert("Nice to see you "+Etudiant[i]);
document.write("<td>"+Etudiant[i]+"</td>");
j = parseInt(prompt("Combien de notes voulez vous calculez ?"));
for (h=0;h<j;h++){
notes[h] = parseInt(prompt("S'il vous plait entrez la "+(h+1)+" note de "+Etudiant[i]));
document.write("<td>"+notes[h]+"</td>");
}
document.write("<tr>");
}
document.write("</tr>");
document.write("</table>");
document.getElementById('monTab').innerHTML=Etudiant;
}
</script>
<BODY>
<H1>Combien de note voulez vous cumulez ?</H1>
<br>
<br>
<input type="button" name="btnSubmit" value="TRY IT" onclick="createTable()">
<div id="monTab" size="10"> Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ... </div>
</BODY>
</HTML>
I found this line in one of the scripts on javascript.kit <code> if(document.layers|| document.getElementById|| document.all) </code> Could someone give me an idea on why this line would be used in a code? Thank you very much 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. 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 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>
How would you make a if for a input box =this do this Some if the input boxe value = this then get innerHTMl Hi there, Ive check the following code in all major browser and it works fine accept ofcourse in IE. Im trying to take the innerHTML from one row and move it to the one above or below depand on the button you are clicking. Does anyone have any idea? Many thanks mkariti <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> TABLE { border-collapse: collapse; } TBODY { border-top: solid black 1px; } TR { border-bottom: solid black 1px; } </style> <script type="text/javascript" language="javascript"> var getId; var row = { selected: -1, hoverColor: '#CCCCCC', defaultColor: '#FFFFFF', onclick: function (trow, id) { getId = id; var r = document.getElementById('row_' + row.selected); if (row.selected != -1 && r) r.bgColor = row.defaultColor; row.selected = id; trow.bgColor = row.hoverColor; }, test: function (num) { var table = document.getElementById("tableId"); var getRowLength = document.getElementById("tableId").rows.length; if (num == 1) { // table.rows[getId].parentNode.insertBefore(table.rows[getId], table.rows[getId - 1]); // getId++; var tempDown = document.getElementById("row_" + getId).innerHTML; document.getElementById("row_" + getId).innerHTML = document.getElementById("row_" + (getId + 1)).innerHTML; document.getElementById("row_" + getId).bgColor = row.defaultColor; document.getElementById("row_" + (getId + 1)).innerHTML = tempDown; document.getElementById("row_" + (getId + 1)).bgColor = row.hoverColor; getId++; } else { // getId--; // table.rows[getId].parentNode.insertBefore(table.rows[getId + 1], table.rows[getId]); var tempUp = document.getElementById("row_" + getId).innerHTML; document.getElementById("row_" + getId).innerHTML = document.getElementById("row_" + (getId - 1)).innerHTML; document.getElementById("row_" + getId).bgColor = row.defaultColor; document.getElementById("row_" + (getId - 1)).innerHTML = tempUp; document.getElementById("row_" + (getId - 1)).bgColor = row.hoverColor; getId--; } } } </script> </head> <body> <div> <table id="tableId"> <tbody> <tr id="row_1" onclick="row.onclick(this,1);"><td><input type="checkbox"></td><td>Row 1</td><td>A</td></tr> <tr id="row_2" onclick="row.onclick(this,2);"><td><input type="checkbox"></td><td>Row 2</td><td>B</td></tr> <tr id="row_3" onclick="row.onclick(this,3);"><td><input type="checkbox"></td><td>Row 3</td><td>C</td></tr> <tr id="row_4" onclick="row.onclick(this,4);"><td><input type="checkbox"></td><td>Row 4</td><td>D</td></tr> <tr id="row_5" onclick="row.onclick(this,5);"><td><input type="checkbox"></td><td>Row 5</td><td>E</td></tr> </tbody> </table> </div> <div> <button id="btn_down" onclick="row.test(1)">Down</button> <button id="btn_up" onclick="row.test(2)">Up</button> </div> </body> </html> How would you make a case statment that creates a button without reloading the page??
|
|||||||