|
JavaScript - Even Simpler Innerhtml Confusion
Can anyone tell me why the string comparison test doesn't work in this javascript function? It works if you use just text between the currentItem div tags, but not when you use html for an image. I even tried to use iso characters instead of angle brackets, as in "<img src=expand.png></img>" and still no dice. Why not?
Code: <html>
<head></head>
<body>
<script language="JavaScript">
function toggleValue()
{
if(document.getElementById("currentItem").innerHTML != "<img src=expand.png></img>")
{
document.getElementById("currentItem").innerHTML = "<img src=expand.png></img>";
}else
{
document.getElementById("currentItem").innerHTML = "<img src=collapse.png></img>";
}
}
//-->
</script>
<table width =" 200" border="0">
<tr>
<td colspan=2><br><center>
<a href="javascript:toggleValue()">Toggle Value</a>
</center></td>
</tr>
<tr>
<td>
<strong>Value:</strong>
</td><td>
<div id="currentItem"><img src=expand.png></img></div>
</td>
</tr>
</table>
</body>
</html>
Thanks, Neil Similar TutorialsHi again folks! A code I did recently was that 10 football teams had to register and the program had to ask the question "please enter your team" ten times then show the display on screen. This code works fine and does it jobs but I realized that I did this program a long winded way (shown below) : <script type="text/javascript"> //ask to enter names var enteredteam1= prompt("Please enter first team.", ""); //each team is shown as different variable var enteredteam2= prompt("Please enter second team.", ""); var enteredteam3= prompt("Please enter third team.", ""); var enteredteam4= prompt("Please enter forth team.", ""); var enteredteam5= prompt("Please enter fifth team.", ""); var enteredteam6= prompt("Please enter sixth team.", ""); var enteredteam7= prompt("Please enter seventh team.", ""); var enteredteam8= prompt("Please enter eighth team.", ""); var enteredteam9= prompt("Please enter ninth team.", ""); var enteredteam10= prompt("Please enter final team.", ""); var team= []; team[1]= enteredteam1 //the team should equal the entered value for the space team[2]= enteredteam2 team[3]= enteredteam3 team[4]= enteredteam4 team[5]= enteredteam5 team[6]= enteredteam6 team[7]= enteredteam7 team[8]= enteredteam8 team[9]= enteredteam9 team[10]= enteredteam10 document.write("<h1>Registered Teams</h1>"); // display the teams on the screen beside number document.write("<b>1.</b>" + team[1]); //write the entered value on the screen document.write("<br><br><b>2.</b>" + team[2]); document.write("<br><br><b>3.</b>" + team[3]); document.write("<br><br><b>4.</b>" + team[4]); document.write("<br><br><b>5.</b>" + team[5]); document.write("<br><br><b>6.</b>" + team[6]); document.write("<br><br><b>7.</b>" + team[7]); document.write("<br><br><b>8.</b>" + team[8]); document.write("<br><br><b>9.</b>" + team[9]); document.write("<br><br><b>10.</b>" + team[10]); </script> I was wondering for future references could anyone suggest a simpler code to do something similar? For instance what if I wanted to ask the question but I didn't know how many teams were going to be entered. It would ask the question (enter your team) until the user clicked on a button saying "finished" or something. Once again, I am new to this field, so any code with comments would be helpful! Hi and hope you can help, I'm doing some course work and the current lesson I'm doing is about substituting images depending on onclick functions. I've attached the HTML / JavaScript as a txt file, this is their sample file and it is rather bulky and repetetive. I was wondering whether it would be possible to simplify the code as there is a lot of repetition, there are 8 question functions and 8 answer functions, I'm wondering if this could be simplified into 1 question and 1 answer function. Thanks for your interest, R Hi guys, any help would be greatly appreciated. I am looking to make a group of questions (FAQs pretty much) and because the answers are so long, I need to hide the answers. So only the questions would be viewable and once the user clicks on the question, the corresponding answer will drop down below. What is the easiest way to go about doing this? I've tried messing around with jquery treeview but I don't think the task is not complicated enough for that. cheers.
Hello, I'm working on a set of animation code for school and I keep getting an error like this: Uncaught SyntaxError: Unexpected token ILLEGAL on line 25 of the code. What am I missing and/or what is out of place? Code: var canvas;
var context;
var CanvasWidth = 0;
var CanvasHeight = 0;
var FPS = 60;
var x = 0;
var y = 0;
var background;
var critter = [];
window.onload = init;
function init()
{
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
CanvasWidth = canvas.width;
CanvasHeight = canvas.height;
background = new Background();
for (var i = 0; i < 6; i++);
}
{
critter[i] = new Critter();
}

function Background ()
{
var obj ={};
obj.draw = function()
{
context.clearRect(0, 0, CanvasWidth, CanvasHeight);
var gradient = context.createLinearGradient(0, 0, 0, CanvasHeight);
gradient.addColorStop(0.0, "#C0F5E7");
gradient.addColorStop(0.8, "#3F43E7");
gradient.addColorStop(0.81, "#AF8553");
gradient.addColorStop(1.0, "#E6CBAB");
setInterval(loop, 1000/FPS );
context.fillStyle = gradient;
context.fillRect(0, 0, CanvasWidth, CanvasHeight);
};
return obj;
}
function Critter() {
var obj = {};
obj.x = 0;
obj.y = 0;
obj.vx = Math.random() * 2 - 1;
obj.vy = Math.random() * 2 - 1;
obj.update = function()
{
obj.x += obj.vx;
obj.y += obj.vy;
}
function bounds()
{
if (obj.x > canvas.width)
{
obj.x = Math.random() * 2 - 1;
obj.y = Math.random() * 2 - 1;
obj.x += obj.vx;
obj.y += obj.vy;
}
}
obj.draw = function()
{
context.fillStyle="#AA0000";
context.fillRect(obj.x, obj.y, 25 , 25);
};
}
}
function draw()
{
context.clearRect(0, 0, CanvasWidth, CanvasHeight);
background.draw();
for (var i = 0; i < critter.length-1; i++)
{
critter[i].draw();
}
}
function loop()
{
update();
draw();
}
function update()
{
for (var i = 0; i < critter.length-1; i++)
{
critter[i].update();
}
critter[i].bounds();
}
Can anyone tell me how the following code actually works please? I've been trying to work out exactly why I need it all, but can't understand it at all! Code: var speed = 50
var myInterval
var pause
function start(){
window.clearInterval(pause)
myInterval = setInterval("auto()",speed)
}
pause = setInterval("start()",3000)
The body onLoad is set to run start(). If anyone can explain why this code is needed I would be very greatful. This is some code that I found that does what I need to do. However in this code I need to create a new var for each item. I have a lot of item in my list that I want to add to the drop down. Is there a simpler way to do this in JS? Cheers Daniel. Code: <HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="GENERATOR" Content="Microsoft Visual Studio">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8">
</HEAD>
<BODY>
<input type="button" value="Show me the menu!"
onclick="populateSelect();" ID=Button1/>
<input type="button" value="Clear it"
onclick="var f = document.getElementById('foodOptions');
while (f.hasChildNodes()) { f.removeChild(f.firstChild); }" ID=Button2/>
<script>
function populateSelect() {
// create optgroups
var breakfast = document.createElement("optgroup");
breakfast.label = "Breakfast";
var lunch = document.createElement("optgroup");
lunch.label = "Lunch";
var dinner = document.createElement("optgroup");
dinner.label = "Dinner";
// create options and attach to optgroups
var cereal = document.createElement("option");
cereal.value = "cereal";
cereal.appendChild(document.createTextNode("Cereal"));
breakfast.appendChild(cereal);
var eggs = document.createElement("option");
eggs.value = "eggs";
eggs.appendChild(document.createTextNode("Eggs"));
breakfast.appendChild(eggs);
var toast = document.createElement("option");
toast.value = "toast";
toast.appendChild(document.createTextNode("Toast"));
breakfast.appendChild(toast);
var sandwich = document.createElement("option");
sandwich.value = "sandwich";
sandwich.appendChild(document.createTextNode("Sandwich"));
lunch.appendChild(sandwich);
var soup = document.createElement("option");
soup.value = "soup";
soup.appendChild(document.createTextNode("Soup"));
lunch.appendChild(soup);
var meat = document.createElement("option");
meat.value = "meat";
meat.appendChild(document.createTextNode("Meat"));
dinner.appendChild(meat);
var potatoes = document.createElement("option");
potatoes.value = "potatoes";
potatoes.appendChild(document.createTextNode("Potatoes"));
dinner.appendChild(potatoes);
var vegetables = document.createElement("option");
vegetables.value = "vegetables";
vegetables.appendChild(document.createTextNode("Vegetables"));
dinner.appendChild(vegetables);
// set "eggs" as the default
eggs.selected = true;
// clear select menu and append optgroups
var selectMenu = document.getElementById("foodOptions");
while (selectMenu.hasChildNodes()) {
selectMenu.removeChild(selectMenu.firstChild);
}
if (breakfast.hasChildNodes()) { selectMenu.appendChild(breakfast); }
if (lunch.hasChildNodes()) { selectMenu.appendChild(lunch); }
if (dinner.hasChildNodes()) { selectMenu.appendChild(dinner); }
}
</script>
<select id=foodOptions></select>
</BODY>
</HTML>
Hello I'm having a very simple RegExp problem. I have the text: Code: sddsfdfs[br][CARET][br]<i>[/quote]</i></div> And I want to match it against a Javascript RegExp: \[br\].*?\[\/quote\]<\/i> Note I used to the non-greedy quantifier ( ? ) for .* , such that it should match the minimum. I am expecting it therefore to match the first in the quote below, but instead it is matching the second: Code: 1. [br]<i>[/quote]</i> ------------------------------------------------- 2. [br][CARET][br]<i>[/quote]</i> I'm sure I've just missed something, I'd very grateful if someone could point out what this is? Thanks Hi all, I am a little stuck trying to use arrays for the purpose of creating a currency converter. I have created the script below but it seem to work fine without the arrays added in. Any ideas? <script type="text/javascript"> function currencyConverter() { //declare and initialise variables var CurrYen = 128.7; var CurrUSDollar = 1.59; var CurrEuro = 1.15; var CurrSwissFrank = 2.06; var CurrDanishKorona = 9.69; var strCurrency = new Array(5); var dblExchange = new Array(5); var dblGross var dblCurrency //collect information from drop-down menu and text boxes strCurrency = document.getElementById("cmbCurrency").value; intSterling = document.getElementById("txtSterling").value //selection if (strCurrency == "Yen") { dblCurrency = CurrYen; } else if (strCurrency == "US Dollar") { dblCurrency = CurrUSDollar; } else if (strCurrency == "Euro") { dblCurrency = CurrEuro; } else if (strCurrency == "Swiss Frank") { dblCurrency = CurrSwissFrank; } else if (strCurrency == "Danish Korona") { dblCurrency = CurrDanishKorona; } else { dblCurrency = 0; } //calculate total currency to convert dblGross = dblCurrency * intSterling; //display total cost document.getElementById("txtSterling").value = dblGross.toFixed(2); } </SCRIPT> Why does... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title></title>
<script language = "javascript">
function start() {document.writeln (testPara.innerHTML = "Object reassignment");}
</script></head>
<body onload="start()">
<p id="testPara">Paragraph</p>
</body></html>
... only produce the output "Object reassignment"? After the onload event fires to execute the document.writeln method, isn't <body> processed to output the "testPara" object, now redefined, a 2nd time? Why does it not? What am I missing? please pardon my ignorance, but I'm clueless as to why this won't work.... the following is in the header of my page. The first part is the "menu" of the page, the second ( <script type="text/javascript" src="rotate1.js.js"> ) is an external script that rotates an image on the page..... the 2nd works perfectly in a page by itself, but when I insert it in the template with the menu script, images won't rotate. I know I'm missing something that tells the 2nd script to run, but I just don't know what it is? I'm just frustrated with myself that I can't figure it out and i've read so many forums/tutorials/helps that I've only succeeded in confusing myself further! HA! i apologize again for my ignorance... last time i did a web site was 8 years ago, but my boss is paying me to get this done and I REALLY need to pay my phone bill this week!!! Code: <script language="Javascript">
<!--
<!--
function gotoURL(u)
{
document.location = u;
}
function turnon(i)
{
if (document.getElementById || (document.all && !document.GetElementById))
i.style.backgroundColor = "#baccfc";
i.style.textColor
}
function turnoff(i)
{
if (document.getElementById || (document.all && !document.GetElementById))
i.style.backgroundColor = "#3462fd";
}
<script type="text/javascript" src="rotate1.js.js">
-->
//-->
</script>
Thanks in advance for ANY advice you may have!!!! Alright, so I've been writing a plain javascript file, which is called by HTML later to grab information from a certain page and then parse through that information. This is being done as a Windows Gadget, so the "browser" is IE. I have two main problems with this: One is caching. I can't get not caching to work at all. I've tried headers and I've tried putting something random at the end of the URL. The randomness at the end of the URL works when done from an HTML file embedded with Javascript but will not work from a pure Javascript file. My other, potentially bigger, problem is that the xmlhttp object does not seem to ever want to open again. I'm pretty sure what's happening is it doesn't get back into ready state 4. That is, unless I run an html file that accesses the same url. Then, suddenly, the gadget runs its update function and it actually decides to work. The gadget still runs the update function otherwise but it doesn't actually do anything, which is I believe caused by it never getting back to ready state 4 on its own. I appreciate any help on this, and if I didn't explain anything clearly I'm more than happy to clarify. Cheers. Can someone tel me the code to put a dropdown box showing default values as shown below using script ..i,e by enclosing them in document.write in script <CODE> <SELECT NAME="choice" > <OPTION VALUE="1">one </OPTION > <OPTION VALUE="2">two </OPTION > <OPTION SELECTED VALUE=" 5 "> 5 </OPTION> </SELECT> </CODE> 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. 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 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();
}
}
}
}
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! 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 |
|||||||