|
JavaScript - Confusion Over Optgroup
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>
Similar TutorialsHello, 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. 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 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!!!! 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 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? 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> Greetings, I am currently using the websites tutorial about browser detection using the navigator. http://www.javascriptkit.com/javatutors/navigator.shtml I am however finding myself unable to detect a pattern in order to learn from. My aim is to use Browser detection to have a CSS file for each browser type, such as Firefox, IE, Opera, Safari and then an overall CSS file if none of the above, to fix numerous flaws. For IE and Firefox using the site's code is all well and good and while I haven't tested it yet I'm wondering how to set up the coding so that it can detect a safari browser. There are lots of slashes and d's and brackets and I do find myself unable to understand their purpose. So if someone can explain how I could do it for Safari I would be very appreciative. |
|||||||