JavaScript - Multiple Conditions - Is This Right?

Hey all,

Okay, Here is what i would like to do.
I have a calculator he
http://www.nico-online.co.uk/calculator/calc1.html


which after some help from Dormilich - got working!

Now, I would like to set up some conditions, so if the use selected 'Mountainbike' then, the script will perform a different calculation to if they select the 'Rennrad' option.

Okay, so I was thinking an If..else..if..else statement would probably be best after reading up

This is what I have come up with:

Code:

 <script language="JavaScript">
function Framesize()
{
var a = parseFloat(BikeSizer.Insleg.value);
if(BikeSizer.Biketype.value = "Mountainbike")
{
b = (a * 0.572);
c = Math.round(b); 
BikeSizer.FramesizeCM.value = c;

d = (a * 0.226);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
}


else if (BikeSizer.Biketype.value = "Trekking-, Reise- oder Cityrad")
{
b = (a * 5);
c = Math.round(b); 
BikeSizer.FramesizeCM.value = c;

d = (a * 5);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
	}
	
else{
	
	b = (a * 10);
c = Math.round(b); 
BikeSizer.FramesizeCM.value = c;

d = (a * 10);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
	}

}
</script> 

So, I'm not too sure if I can set the Menu values as recongnisable values!

Here are the values I have:

<select name="Biketype" style="font-size:11px;">
<option>Mountainbike</option>
<option>Trekking-, Reise- oder Cityrad</option>
<option>Rennrad</option>
</select>

Anyone out there offer any insight? Am I going horribly wrong somewhere?

Apologies for the stupidness , I am quite new to JS!

Thanks in advance

Hi I am trying to write a JavaScript conditional statement for 4 conditions

I currently have:


Code:

       var teamId=obj.id.substring(0, 1);
	var indx=obj.id.substring(obj.id.indexOf('_')+1);
	var id=indx.substring(0, indx.length-1);

	var anotherTab = (indx.indexOf('a') >= 0) ? id + 'b' : id + 'a';
	var anotherTab2 = (indx.indexOf('c') >= 0) ? id + 'b' : id + 'c';
	var anotherTab3 = (indx.indexOf('d') >= 0) ? id + 'b' : id + 'd';
	
	
	document.getElementById(teamId+'tab_' + indx).className = 'selected';
	document.getElementById(teamId + 'tab_' + anotherTab).className = '';
	document.getElementById(teamId + 'tab_' + anotherTab2).className = '';
	document.getElementById(teamId + 'tab_' + anotherTab3).className = '';

	

	if (indx==id+'a')
	{
		show (teamId+'basketballInfo_'+id);
		hide(teamId + 'soccerInfo_' + id);
		hide(teamId + 'footballInfo_' + id);
		hide(teamId + 'baseballInfo_' + id);	
	}
	else if(indx==id+'b')
	{
	   hide(teamId + 'basketballInfo_' + id);
	    show(teamId + 'soccerInfo_' + id);
	    hide(teamId + 'footballInfo_' + id);
		hide(teamId + 'baseballInfo_' + id);
	}
	else if(indx==id+'c')
	{
	   hide(teamId + 'basketballInfo_' + id);
	    hide(teamId + 'soccerInfo_' + id);
		hide(teamId + 'baseballInfo_' + id);
	    show(teamId + 'footballInfo_' + id);
	}
	else 
	{
	   hide(teamId + 'basketballInfo_' + id);
	    hide(teamId + 'soccerInfo_' + id);
	    hide(teamId + 'footballInfo_' + id);
  	    show(teamId + 'baseballInfo_' + id);
	}
	
		
}

I am trying to turn one tab on and have the others turned off until another tab is clicked on. It works fine if I have all 4 conditions but I need to be able to also have 3, 2, and 1. What would be an easy way to do so?

Hi,

I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html.

I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress.

Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page.

Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover.

There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer.

Is this possible?

Hi, been using javascript for a while now, and wondering how else this could be coded to be more effective and to 'work'.

The idea is that the user gets prompted, 'what is your birthday?' the user would put in 0121 or whatever their birthday is,
as 01 = month and 21 = day. I'm sure you'll understand what I mean....

Code:

<DOCTYPE html>
<html>
<script>
var userAnswer = prompt("When is your birthday? Example: Jan 21st = 0121")
</script>
<head>
</head>
<body>
<script>
if(userAnswer >= 0101){
alert('You are Capricorn!') };
if(userAnswer >= 0120){
alert('You are Aquarius!') };
if(userAnswer >= 0219){
alert('You are Pisces!') };
if(userAnswer >= 0321){
alert('You are Aries') };
if(userAnswer >= 0420){
alert('You are Taurus') };
if(userAnswer >= 0521){
alert('You are Gemini!') };
if(userAnswer >= 0621){
alert('You are Cancer!') };
if(userAnswer >= 0723){
alert('You are Leo!') };
if(userAnswer >= 0823){
alert('You are Virgo!') };
if(userAnswer >= 0923){
alert('You are Libra!') };
if(userAnswer >= 1023){
alert('You are Scorpio!') };
if(userAnswer >= 1122){
alert('You are Sagittarius!') };
if(userAnswer >= 1222){
alert('You are Capricorn!') }; 
</script>
</body>
</html>

Reply With Quote




01-18-2015, 10:01 AM #2
Mitchellwood101 View Profile View Forum Posts

New to the CF scene Join Date Nov 2014 Posts 7 Thanks 0 Thanked 0 Times in 0 Posts

And then it will alert the user of their star sign******





Reply With Quote

01-18-2015, 05:47 PM #3
Philip M View Profile View Forum Posts

Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts

If you have been using Javascript for a while now, you should be aware that prompts and alerts are long obsolete, and I would advise that you should not be wasting your time learning this stuff. Use DOM methods to obtain input from and display messages to your users. Be aware that a value starting with 0 is a string, not a number, and so must be in quotes - that is why your code does not work.
In any case you need rigorous checking to ensure that the birthday entered in this form is valid, e.g. not 56th Febtember or "Mickey Mouse". You would do best to obtain the input from select lists for month and day, expressed as numbers. A tiny bit more sophistication would allow the user to select a month by name, where the text of the option is the month name, and the value of that option the month number.

Code:

<select id = "monthlist" onchange = "getSignFunction()">
<option value = "0"> Choose your birth month</option>
<option value = 1>January</option>
<option value =  2>February</option>
... and so on
</select>

Then you want something like this:-

Code:

function getSignFunction()"{
var sign = "";
var month = document.getElementById("monthlist").value;
var date = document.getElementById("datelist").value;
if (month == 0) {return}  //  invalid choice

if (month == 1 && date >=20 || month == 2 && date <=18) {sign = "Aquarius";}
if (month == 2 && date >=19 || month == 3 && date <=20) {sign = "Pisces";}
if (month == 3 && date >=21 || month == 4 && date <=19) {sign = "Aries";}
if (month == 4 && date >=20 || month == 5 && date <=20) {sign = "Taurus";}
if (month == 5 && date >=21 || month == 6 && date <=21) {sign = "Gemini";}
if (month == 6 && date >=22 || month == 7 && date <=22) {sign = "Cancer";}
if (month == 7 && date >=23 || month == 8 && date <=22) {sign = "Leo";}
if (month == 8 && date >=23 || month == 9 && date <=22) {sign = "Virgo";}
if (month == 9 && date >=23 || month == 10 && date <=22) {sign = "Libra";}
if (month == 10 && date >=23 || month == 11 && date <=21) {sign = "Scorpio";}
if (month == 11 && date >=22 || month == 12 && date <=21) {sign = "Sagittarius";}
if (month == 12 && date >=22 || month == 1 && date <=19) {sign = "Capricorn";}

alert (sign);  // alert used here just for testing purposes.  Crate as <span> and then use document.getElementById("spanid").innerHTML = sign to display the result to the user.

}

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

here is my issue... i have an object and i need to call two functions. i need the onclick="something" to call a server side function and then i need another onclick="something" to call a javascript funtion... the problem is you can only have one "onclick" (similar to having one "class")... how can I set up an onclick that will call both my serverside function and my javascript function... I realize this is not specifically serverside section of forum, so pretend I am asking how to call two separate javascript functions with different names

the item in question is here
Code:

<asp:Button ID="btn_gen1" runat="server" Text="InterventionCentral" class="show" 
                       onclick="btn_gen1_Click" onclick="autohide" onmouseover="details_visible(1)" onmouseout="details_hidden(1)" />

just showing this to clarify that javascript does work with the asp and my mouse functions are working fine... my asp onclick works as well.. i can remove the asp and leave the js and it will work, but then all the stuff i do server side for the onclick goes away

is this able to be done? this is for dev testing and i will eventually run into the same problem of needing to call two separate javascipt functions via onmouseover and also onmouseout

how do i make something like this? so that instead of viewing a long list it will be divided into pages..?

I have a quick question with multiple array and random numbers. If i generate my random numbers in one array, how would i take a selection of those numbers and put them in another array?

Ex: array 1: 25, 34, 38, 40, 22, 49

want to move numbers between 30 and 50 to another array.

array 2: 34, 38, 40, 49


is it as simple as for loops and if statements setting the conditions?
do i use a sorting method? (selection? bubble?)

any help would be appreciated.

Hi,

I am new to Javascript, but am trying to work with a bit of script I found online to create a crossfade slideshow for my page. The problem I am having is that I want to have several slideshows on my page.

On it's own, a single slideshow works fine but when I add a second (and do my best to hack the code with my limited knowledge) only one slideshow will work, or sometimes neither. I found the article from this site that explained about event conflict, but the example used looked quite a bit different to mine.

Here is the js file I started with

Code:

window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init()
{
	if(!d.getElementById || !d.createElement)return;

	css = d.createElement('link');
	css.setAttribute('href','slideshow2.css');
	css.setAttribute('rel','stylesheet');
	css.setAttribute('type','text/css');
	d.getElementsByTagName('head')[0].appendChild(css);

	imgs = d.getElementById('rotator').getElementsByTagName('img');
	for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
	imgs[0].style.display = 'block';
	imgs[0].xOpacity = .99;
	
	
	setTimeout(so_xfade,3000);
}

function so_xfade()
{
	cOpacity = imgs[current].xOpacity;
	nIndex = imgs[current+1]?current+1:0;
	nOpacity = imgs[nIndex].xOpacity;

	cOpacity-=.05;
	nOpacity+=.05;

	imgs[nIndex].style.display = 'block';
	imgs[current].xOpacity = cOpacity;
	imgs[nIndex].xOpacity = nOpacity;

	setOpacity(imgs[current]);
	setOpacity(imgs[nIndex]);

	if(cOpacity<=0)
	{
		imgs[current].style.display = 'none';
		current = nIndex;
		setTimeout(so_xfade,3000);
	}
	else
	{
		setTimeout(so_xfade,50);
	}

	function setOpacity(obj)
	{
		if(obj.xOpacity>.99)
		{
			obj.xOpacity = .99;
			return;
		}

		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
	}
}

This uses a couple of CSS files and then you just add a div=rotator on the html to add the object and then the images and links within that div.

If anyone can help, or perhaps give me a better solution, I'd be most grateful.

Thanks

I'm making a website, and my aim is to have a terminal like interface. I am encountering a problem with startup text. I cannot get it to work right with the following...
function title()
{
document.getElementById("prompts").innerHTML =
"OS v0.1"+
setTimeout("<br />&gt; Loading...",2500)+
setTimeout("<br />&gt; FATAL ERROR!",12500)+
setTimeout("<br />&gt; Please enter command.",13500);
}
However I get undefined for the settimeouts.

Ok, I have no idea how to really even explain what's been asked of me, but it's seems to me that this could be a bit beyond my knowledge.

We're creating an alternate reality game which starts with a series of questions that people can choose from two answers. The answers will determine which path the person will travel. They'll be given a password at the end of the series of questions. There are three possible paths, which means three possible passwords given.

On the same page, beneath the questions would be a text box with a "submit" button. The password they are given would be typed in there, and then they'd proceed to the proper page. This keeps from people being able to "skip" the questions portion. What they'd proceed to next is a video which is currently being made for our event, which has hidden puzzles and clues in it to find the next password. Rinse and repeat...

My problem? How the heck do I make that box and submit button and password all work together when I have more than one password? Even more so, how do I make the password/submit button direct someone to the correct URL (without revealing the URL, and also prevents anyone from copying the URL and sharing it to bypass the password request)?

For example:

Questions are complete and the password "invention" is given.

The person types in the word invention and presses submit. It directs the to www.url.com/game1 automatically.

While someone else will come in, answer the questions, and the password "intelligence" would be given.

That person types in the word intelligence and presses submit into the same box, using the same button that the person who typed in the word invention typed in. But this person would instead be directed to www.url.com/game2

If either person shared the link they were directed to, then it'd prompt people to put in a password before letting them in.

How in the darn world do I make this happen?? LOL!

Thanks in advance for any time, advice, or tutorials provided!

---------------------------------------- Added later....

I might need to go ahead and ask this as well.. since it got me to thinking..

How would I go about hiding the URL as well. I'm only interested in doing it for the game side of the site to keep from people sharing that URL and stripping the "fun" away from the game. Hopefully it is something simple? I'm fairly new at coding. My knowledge is no where as vast as I see many others here are. So if you should decide to have the patience to assist me, please be specific in steps like you are describing this to your kid who has no idea what you're talking about. I hate to present it that way, but I don't want to annoy anyone by stating I don't understand.

Hi folks.
I am new to javascript so please go easy on me if this is a silly request

Basically I have a table generated by a php script with a dynamic number of rows and columns. Here is a sample of the output from this script:
Code:

<tr>
<td style='width:60px'><a href='index.php?inc_id=30' onclick='return confirmDelete(this)'>Remove</a></td>
<td style='text-align:center'>test</td>
<td ><input type='text' name='0inccol0' value='$432.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='0inccol1' value='$432.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='0inccol2' value='$432.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='0inccol3' value='$432.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='0inccol4' value='$432.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='0inccol5' value='$432.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='0inccol6' value='$432.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='0inccol7' value='$432.00' style='text-align:center; background-color:#cccccc'/></td>
</tr>
<tr>
<td style='width:60px'><a href='index.php?inc_id=31' onclick='return confirmDelete(this)'>Remove</a></td>
<td style='text-align:center'>test2</td>
<td ><input type='text' name='1inccol0' value='$213.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='1inccol1' value='$213.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='1inccol2' value='$213.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='1inccol3' value='$213.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='1inccol4' value='$213.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='1inccol5' value='$213.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='1inccol6' value='$213.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='1inccol7' value='$213.00' style='text-align:center; background-color:#cccccc'/></td>
</tr>
<tr>
<td style='width:60px'><a href='index.php?inc_id=32' onclick='return confirmDelete(this)'>Remove</a></td>
<td style='text-align:center'>test3</td>
<td ><input type='text' name='2inccol0' value='$65.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='2inccol1' value='$65.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='2inccol2' value='$65.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='2inccol3' value='$65.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='2inccol4' value='$65.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='2inccol5' value='$65.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='2inccol6' value='$65.00' style='text-align:center; background-color:#cccccc'/></td>
<td ><input type='text' name='2inccol7' value='$65.00' style='text-align:center; background-color:#cccccc'/></td>
</tr>

What I want to do is create a row of 'totals' fields at the bottom of this table that will sum the fields in the column above.
Looking at the naming convention above, the first number is the row, the number at the end is the column so I will want to sum all of the input values with a name ending in 0 in the first 'total' field, all the input values with names ending in 1 in the next and so on. The number of rows and columns is dynamic based on the users selections prior to buiding the table.

The reason I am using input fields is that I would also like an event (onChange/onBlur?) that will update the totals fields if a user manually changes the value in one of the inputs.

Any advice on this will be appreciated!

plz i want to know how to make the effects that exists on this link in the upper part :

http://www.masrawy.com/new/


1-) changing color when pressing on the color

2-) changing font (+) to increase it
(-) to decrease it
(N) to set it to the normal style

3-) decrease and increase the width of the page
(from
كبر حجم الصفحة
or
صغر حجم الصفحة
)


can anyone help me in doing this task?????

Hey guys,

I'm a noob with javascript and I only know simple HTML coding, so I have become stuck. I can program in other languages though, so I understand the principles. That being said, I have become stuck with something.

My aim is to have a series of page where text is displayed, and then two or more buttons. Once a button is clicked, I want the screen to clear and it displays the next lot of text, followed by some more buttons.
Once they are pushed, it continues on.

So basically, each section has its own code that it pushes, plus its own buttons which lead to other sections. I am not trying to make a choose your own adventure book, but the layout is basically one of these.

I can do this in another language by simply having a few sections. Inside each section, it retrieves the option and proceeds. However, when I am trying to do this, I am getting confused.

The way my other programming experience tells me to write it, I would write a function which is called for each section, and it would display the text, the buttons, and return to the main function in the program.

However, because the buttons are in HTML, I cannot put code for the new buttons instead the functions. If I put the code inside the body of HTML, it will automatically be displayed. I cannot write an if statement to determine which buttons are displayed.


Can you please give me some advice around this? I hope I have made myself clear enough to be understood!!

One other thing I should mention, I really want to be able to do this in a single HTML file instead of calling other files. I think this would work fine by using frames and multiple HTML files, but I would prefer not to unless I really need to. One file would be much better for me.

Thanks!


Below is the basic code I am working from. It displays the first section with some text, displays two buttons and it goes to the next section on a button click.



Code:

<html>

<head>
<script type="text/javascript">

function button1()
{
document.write("Button 1 was pushed. Insert text here. Choose from two new buttons below:");
}

function button2()

{
document.write("Button 2 was pushed. Insert text here. Choose from two new buttons below:");
}

</script>
</head>



<body>

<form>
<input type="button" value="Button1" onClick="button1()" />
<input type="button" value="Button2" onClick="button2()" />
</form> 

</body>
</html>