JavaScript - Javascript Switch Statements - Help?

My problem is that i have multiple math calculations within different functions that have multiple switch statements that get calculated with an onclick="functionOne()" for each radio button and before i can calculate the outcome for some reason i must fully insert a value for every input as well as check every raidio button before i get to the end of my list. I wish to simply allow the user to fill out as many fields as he wishes leaving some bank without being restricted to do every single one.. Thank you in advance

Hello there!

I am completely new to these forums and to programming in general (however, I used to program some games, albeit not very good ones, on a version of BASIC that came with my Playstation 2 about 10 years ago hehe). I have a basic understanding of functions, loops, if/else/switch and an extremely basic understanding of objects/methods. I wanted to consolidate my knowledge by putting it to practical use so I have made a little text adventure game. At the moment it is horrendously non-user-friendly as it has just been me experimenting with functions, if/else statements etc.

Anyway, below is my code and I have two specific questions regarding it (but general answers telling me how I could do things more efficiently OR telling me what I should consider studying would be very appreciate also :)).

Firstly, I have a little inventory object up top and when the player picks up something in the game I change the inv item to "true" so they can use it later (it seemed logical!). I would really love to know how the user could type in "inv" and for their inventory to be shown back to them. i.e. How could I show only the "true" items of an object? I have tried coding this myself but I really am stumped for an answer.

Secondly, you can see in the "north21" function within the "north2" function that I used a series of if/else statements instead of a switch. I would have much prefered to use a switch and then for the case of "go north" have an if/else statement to check if vineclear is true or not (so that they can pass through to the non-existent north3 room). Is this possible? You can use if/else statements within an if/else statement but it seemed when I tried doing that in a switch it didn't like it.

I am running this script through an interpreter to play the "game". I understand that JS probably isn't the best for what I am trying to do, it was more just a "see what I can do" exercise more than anything.

Thanks in advance for your help and please be nice to me, forums scare me generally :D

testgame.txt

I have to attach the code in a txt file as for some reason it wasn't displaying properly when I copied and pasted it here. Apologies!





Reply With Quote




01-17-2015, 08:26 PM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts

Briefly: Code:

// based on this:
var inv = {
	sword: false,
	shield: false,
	vines: false
};

// try this:
function displayInventory( )
{
    var list = [ ];
    for ( var item in inv )
    {
        if ( inv[item] == true )
        {
            list.push( item );
        }
    }
    if ( list.length == 0 ) 
    {
        return "You have no items in your inventory";
    }
    return "You have these items in your inventory:<ul><li>"
           + list.join("</li><li>") + "</ul>";
}

My code is designed for display in an HTML page, not for use in clumsy console.log( ) coding. prompt() and alert() and confirm() and document.write() and console.log() should be used ONLY when debugging, not for any real work.

But if you must use console.log, then try this, to replace the code in italics: Code:

    return "You have these items in your inventory: " + list.join(",");

Hi,

Any help would be greatly appreciated. Below is the javascript that I am having a problem with. The two id's in question are at the end of the javascript. fyi Its for a form.

What will happen is that the user selects the first dropdown with an id of 00N20000001HjsR. They then selects another dropdown with an id of 00N20000001Hp9Q.

What I want is that on the second dropdown, if the user selects the value of Beauty Therapy, it will change the value of the first dropdown (id 00N20000001HjsR) to 'ANCB'.

The problem I have at the moment is that it is not overriding the original dropdown selection. Any ideas on how to solve this?

Much appreciated in advance, thanks!!!


Code:

<script type="text/javascript">
//check if prospectus is on
document.formRec.onsubmit = function() { return ValidForm(); };

function ValidForm(){
		
	if (document.getElementById("first_name").value == ""){
		alert("Please enter your first name");
		document.getElementById("first_name").focus();
		return false;
	}

	if (document.getElementById("last_name").value == ""){
		alert("Please enter you last name");
		document.getElementById("last_name").focus();
		return false;
	}
	if (document.getElementById("email").value == ""){
		alert("Please enter your email address");
		document.getElementById("email").focus();
		return false;
	}
	if (document.getElementById("phone").value == ""){
		alert("Please enter your contact number");
		document.getElementById("phone").focus();
		return false;
	}
	
	if (document.getElementById('00N20000001Hp9a').value== "--None--"){
		alert("Please choose you country of citizenship");
		document.getElementById('00N20000001Hp9a').focus();
		return false;
	}
	
	if (document.getElementById('00N20000001HjsR').value== "--None--"){
		alert("Please select type of study you are interested in");
		document.getElementById('00N20000001HjsR').focus();
		return false; 					
	}
	
	
	switch (document.getElementById('00N20000001Hp9Q').value) {
		
		case "--None--":
		alert("Please select area of study you are interested in");
		document.getElementById('00N20000001Hp9Q').focus();
		return false; 		
		break;
		
		case "Beauty Therapy":
		document.getElementById('00N20000001Hp9Q').value = "Beauty Therapy";	
		document.getElementById('00N20000001HjsR').value = "ANCB";	
		break;

	}
	
	
	return true;
	
}

</script>

I have a DIV that contains a sentence, call it Text_A. When a button is clicked, I would like to have Text_A replaced by Text_B.

Text_A = The sky is blue.
Text_B = The grass is green.

How would I do this with simple javascript?

A non-programmer thank you immensely.

Mike

I'm a little new to Javascript so I apologise if this is an easily resolved problem.

This is my Javascript code:
Code:

function display(){
		if(document.getElementById('one').style.display="none"){
		document.getElementById('one').style.display="block";
		}
		else if(document.getElementById('one').style.display="block"){
		document.getElementById('two').style.display="block";
		}
		else{
		document.getElementById('three').style.display="block";
		}
	}

This is my HTML:
Code:

<html>
....
<style>
#one,#two,#three {
display:none;
}
</style>
....
<ul>
		<li id="one">1</li>
		<li id="two">2</li>
		<li id="three">3</li>
		<li id="click" onclick="display()">+</li>
	</ul>

The idea is when I click the list item 'click' the display() function will be called and make list item 'one' appear. If list item 'one' is already visible however, list item 'two' will appear, etc. When I click it, list item one appears fine as it should, but if I click it again list item two does not appear, and I can't work out why. I could really do with some help, thank you in advance!

Hello

I have issue and question.

My software is taking value "inputVal" and assign it to the variable inputValue for example: assdsf


than


value "inputTyp" and assign it to the variable inputType for example: string


so I want now to switch betwean "inputType" using "switch case"
Every case has some "code" inside.

So if my software choosed for example: inputType which is for example STRING value

I want to RUN case 'string':

But it doesn;t works ;/

It doesn't goes to any case;/

what is wrong with the code ;/

every case should test according regular expressions is string a string or email is email or number is number etc... and result: "false or true" should be assign to new variables for example "inpNUMBER" "inpEMAIL" etc.

please help

here is a code


Code:

inputValue = scriptletContext.getLocal("inputVal");
inputType = scriptletContext.getLocal("inputTyp");

//scriptletResult = inputType; 

switch (inputType)

{

case 'number': scriptletResult=("inpNUMBER",/^[-+]?\d+(\.\d+)?$/.test(inputValue)); 
//scriptletContext.put("inpNUMBER",/^[-+]?\d+(\.\d+)?$/.test(inputValue));  


case 'email': scriptletResult=("inpEMAIL",/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[(2([0-4]\d|5[0-5])|1?\d{1,2})(\.(2([0-4]\d|5[0-5])|1?\d{1,2})){3} \])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(inputValue));
//criptletContext.put("inpEMAIL",/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[(2([0-4]\d|5[0-5])|1?\d{1,2})(\.(2([0-4]\d|5[0-5])|1?\d{1,2})){3} \])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(inputValue)); 


case 'string': scriptletResult=("inpALPHA",/^[a-z0-9]+$/.test(inputValue)); 
//scriptletContext.put("inpALPHA",/^[a-z0-9]+$/.test(inputValue));  


case 'ip': scriptletResult=("inpIP",/^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)+$/.test(inputValue)); 
//scriptletContext.put("inpIP",/^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)+$/.test(inputValue));  


default:
scriptletContext.put("errors",inputType)

};

Code:

top.window.moveTo(0, 0);
if (document.all) {
	top.window.resizeTo(screen.availWidth, screen.availHeight);
} else if (document.layers || document.getElementById) {
	if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
		top.window.outerHeight = screen.availHeight;
		top.window.outerWidth = screen.availWidth;
	}
}
function gcd(a, b) {
	return (b === 0) ? a : gcd(b, a % b);
}
var i = 0;
var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) 

|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (; i < data.length; i + 1) {
			var dataString = data[i].string, dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {	
				if (dataString.indexOf(data[i].subString) !== -1) {
					return data[i].identity;
				}
			} else if (dataProp) {
				return data[i].identity;
			}
		}
		return data[i].identity;
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index === -1) {
			return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
		}
	},
	dataBrowser: [
        {    string: navigator.userAgent,
             subString: "Chrome",
             identity: "Chrome"
            },
        {    string: navigator.userAgent,
             subString: "OmniWeb",
             versionSearch: "OmniWeb/",
             identity: "OmniWeb"
            },
        {    string: navigator.vendor,
             subString: "Apple",
             identity: "Safari",
             versionSearch: "Version"
            },
        {    prop: window.opera,
             identity: "Opera"
            },
        {    string: navigator.vendor,
             subString: "iCab",
             identity: "iCab"
            },
        {    string: navigator.vendor,
             subString: "KDE",
             identity: "Konqueror"
            },
        {    string: navigator.userAgent,
             subString: "Firefox",
             identity: "Firefox"
            },
        {    string: navigator.vendor,
             subString: "Camino",
             identity: "Camino"
            },
        {    string: navigator.userAgent,
             subString: "Netscape",
             identity: "Netscape"
            },
        {    string: navigator.userAgent,
             subString: "MSIE",
             identity: "Explorer",
             versionSearch: "MSIE"
            },
        {    string: navigator.userAgent,
             subString: "Gecko",
             identity: "Mozilla",
             versionSearch: "rv"
            },
        {    string: navigator.userAgent,
             subString: "Mozilla",
             identity: "Netscape",
             versionSearch: "Mozilla"
            }
	],
	dataOS : [
		{   string: navigator.platform,
                      subString: "Win",
                      identity: "Windows"
		    },
		{   string: navigator.platform,
                      subString: "Mac",
                      identity: "Mac"
		    },
		{   string: navigator.userAgent,
                      subString: "iPhone",
                      identity: "iPhone/iPod"
	             },
		{   string: navigator.platform,
                      subString: "Linux",
                      identity: "Linux"
		    }
	]
};
var version;
if (dataString.indexOf(dataBrowser.versionSearch) !== -1) {
	version = parseFloat(string.indexOf(dataBrowser.versionSearch), 1);
} else {
	version = parseFloat(string.indexOf(dataBrowser.identity), 1);
}
BrowserDetect.init();
if (dataBrowser.identity === "Chrome") {
	if (version >= 8) {
		document.location.replace("main/index.htm");
	} else if (version >= 3) {
		document.location.replace("meh/index.htm");
	} else {
		document.location.replace("http://www.browserchoice.eu/");
	}
} else if (dataBrowser.identity === "Safari") {
	if (version >= 5) {
		document.location.replace("main/index.htm");
	} else if (version >= 3) {
		document.location.replace("meh/index.htm");
	} else {
		document.location.replace("http://www.browserchoice.eu/");
	}
} else if (dataBrowser.identity === "Opera") {
	document.location.replace("http://www.google.com/");
} else if (dataBrowser.identity === "Firefox") {
	document.location.replace("http://www.google.com/");
} else if (dataBrowser.identity === "Mozilla") {
	document.location.replace("http://www.yahoo.com/");
} else if (dataBrowser.identity === "Explorer") {
	if (version >= 8) {
		document.location.replace("meh/index.htm");
	} else {
		document.location.replace("http://www.browserchoice.eu/");
	}
}

For some reason, this script was working before I put in the if statements, but after the if statements were placed in, it stopped auto maximizing as well, and no if statements were added around this. Does anyone know what the problem is? (It's supposed to redirect by browser to one of 3 sites based on how good they are)

I'm fairly new to javascript and would appreciate any help offered. I'm trying to use the input from an HTML form to interact with a switch statement in javascript. I want my users to input a few specific words, and have each word they input redirect them to a specific page.

Below is what I've currently come up with. I cannot get it to function properly as it continues to display the default output regardless of the input

Code:

 <script language="JavaScript" type="text/javascript" > 
    <!--
function checkform ( form )
{
    var favcolour =("form.data", "")
    switch (favcolour) {
      case "red":
        window.location="index.html";
        break;
      case "green":
        window.location="index.html#tips";
        break;
      case "blue":
        window.location="index.html#blue";
        break;
      default:
        document.writeln("Invalid Input");
      };
	  }
    // -->
  </script>
 </head>
 <body>
 <form action="" method="post" onsubmit="return checkform(this);"> 
  <input type="text" name="data" />

Again any help would be greatly appreciated!

Hi,

I'm doing some experimenting. So this may look bad to javascript experts here. But I'm trying to learn.

I have a header div that will show a larger image when the user mouses over each thumbnail image. I used jQuery to create this effect. The header div contains a button. Once the button is clicked, an alert will pop up to tell the user the artist's name of image. The button is wired to an ID of a paragraph. Problem is, my code is not working. I don't want to use "onclick" inline javascript (which is what I am using to call the showArtistname() function). I want unobtrusive javascript like jQuery is. I'm not sure how to do this. I don't know if I should use an array or if I'm even approaching this correctly. Well, it's not correct, because it's not working...

Here is my jQuery code:

Code:

$(function(){
$("a:has(img.small)").mouseover(function(){
var bigImage= $(this).attr("href");
$("#heading").attr({src: bigImage});
return false;
});

});

here is my javascript code:

Code:

function showArtistname(){ 

var a = document.getElementById("bluesails", "purplemountains", "bigsky", "nightlights", "fireysunset", "brilliantsunrise").innerHTML;


switch(a) {
	case "bluesails":
		alert("Arthur MacKenzie")
		break
	case "purplemountains":
		alert("Maggie Laing")
		break
		
	case "bigsky":
		alert("Arthur MacKenzie")
		break
		
	case "nightlights":
		alert("Aria Soriano")
		break
		
	case "fireysunset":
		alert("Felix Buckley")
		break
		
	case "brilliantsunrise":
		alert("Felix Buckley")
			
}
}

Here is the HTML:


Code:

<div class="container_12" id="_container">

  	<div class="grid_12" id="12_header" > 
    	
        <div class="hc_left_pic"> <images/01_md.jpg" id="heading" alt="Big Image." />
    <div id="showImage" onclick="showArtistname()"></div>
  </a></div> 
 	</div>


       
  	<div class="clear"></div> 
    
    
    
  	
  <div class="grid_4" id="artist_container1">
    <a href="images/01_md.jpg"><img src="images/01_sm.jpg" width="100" height="100" class="small" alt="Small image Blue Sails" /></a>    
  		<p class="text" id="bluesails">Blue Sails</p>
  </div>
  
  
  <div class="grid_4" id="artist_container2">
  <a href="images/02_md.jpg"><img src="images/02_sm.jpg" width="100" height="100" class="small" alt="Small Image Purple Mountains"/></a>
    	<p class="text" id="purplemountains">Purple Mountains</p>
  </div>
  
  
  <div class="grid_4" id="artist_container3">
  <a href="images/03_md.jpg"><img src="images/03_sm.jpg" width="100" height="100" class="small" alt="Small Image Big Sky"/></a>
    	<p class="text" id="bigsky">Big Sky</p>
  </div>
  
  
  <div class="clear"></div>
  
  
  <div class="grid_4" id="artist_container4">
  <a href="images/04_md.jpg"><img src="images/04_sm.jpg" width="100" height="100" class="small" alt="Small Image Night Lights" /></a>
    	<p class="text" id="nightlights">Night Lights</p>
  </div>
    
    
  <div class="grid_4" id="artist_container5">
  <a href="images/05_md.jpg"><img src="images/05_sm.jpg" width="100" height="100" class="small"  alt="Small Product Image Firey Sunset"/></a>
    	<p class="text" id="fireysunset">Firey Sunset</p>
  </div>
  	
    
  <div class="grid_4" id="artist_container6">
  <a href="images/06_md.jpg"><img src="images/06_sm.jpg" width="100" height="100" class="small"  alt="Small Product Image Brilliant Sunrise"/></a>
    	<p class="text" id="brilliantsunrise">Brilliant Sunrise</p>
</div>

Here's the CSS:


Code:

.container_12 .grid_4 {
  width: 274px;
  height: 370px;
  background-color:#ccc;
  border: 3px solid #999;
  padding-left:10px;
  padding-right:10px;:confused:
  padding-bottom:10px;
}


#showImage{
margin: -170px 20px 80px 700px;
width: 176px;
height: 48px;  
background:url(../images/showimage.jpg);
position:relative;
z-index:100;
}

.grid_4 img {
position:relative;
left:100px;
top:20px;
padding:0 0 60px 0;
border:none;

}
.grid_4 p {
position:relative;
text-align:center;
}

p.text {
font-family:Arial, Helvetica, sans-serif;
font-size:.75em;
color:#000;
line-height:1.25em;
font-weight:bold;
}


#12_header {
display: inline;
background-color:#e5e5e5;
border: 3px solid #bfbfbf;
height:225px;
font-family:Arial, Helvetica, sans-serif;
font-size:;
color:#000;
font-weight:bold;
line-height:1.2em;

}


.hc_left_pic {
float:left; 
margin-top:15px;
background-color:#e5e5e5;
border: 3px solid #bfbfbf; 
width:935px;
height:250px;

}

Hello all

I have a video playlist useing iframe
http://alohainvesting.com/html5/Html5player.html

Is there a way to get same results without iframes?

i just want to switch items on nav to the wrapper window.

can this be done?

Thanks

just a general question really... now that I've finally started using switches, it seems to me that they're just a big if /else if statement, with an else thrown in at the end for the default.

but that can't be right. I know that in javascript there are a million ways to achieve the same result, but why would they (whoever they are) go to the trouble of making two basic operations that do exactly the same thing?

to me it seems that switches are better for lots of conditions and if else is a quick way to work with two or three, but apart from readability, are there any inherent advantages in choosing one approach over the other?

all opinions appreciated, and I hope I don't start another argument.

Im trying to figure out why this code won't work. Unsuccessfully. Sorry, didn't know how to use the "CODE" tag.

<html>
<head>
<script type:"text/javascript">
var BGColor = prompt("Would you like the background of the page to be red, green, or blue?","")
</script>
</head>
<body>
<script type:"text/javascript">
if (BGColor == "red")
{ document.write('<body bgcolor= "red">The body of this page is RED. Press F5 to restart!') }
else if (BGCOlor == "green")
{ document.write('<body bgcolor= "green">The body of this page is GREEN. Press F5 to restart!') }
else if (BGColor == "blue")
{ document.write('<body bgcolor= "blue">The body of this page is BLUE. Press F5 to restart!') }
</script>
</body>
</html>

I want to make a function that will also play a sound byte when you click on the large image. i need the sound byte to change with the images.

Here is the code that i am using.

Code:

intImage = 2;
function swapImage() {
switch (intImage) {
case 1:
IMG1.src = "images/picture1-lg-over.png"
IMG2.src = "images/picture2-sm-top.png"
IMG3.src = "images/picture3-sm-btm.png"
intImage = 2;
return(false);

case 2:
IMG1.src = "images/picture2-lg-over.png"
IMG2.src = "images/picture1-sm-top.png"
IMG3.src = "images/picture3-sm-btm.png"
intImage = 3;
return(false);

case 3:
IMG1.src = "images/picture3-lg-over.png"
IMG2.src = "images/picture2-sm-top.png"
IMG3.src = "images/picture1-sm-btm.png"
intImage = 1;
return(false);
}
}

i have tried many things that involved each case to contain a different IMG1.onClick="";
value but it doesnt seem to change when the case changes.

I have also tried making another switch/case that would change the value of the onClick event.. nothing.

any sugestions?

how to make a switch that goes on a button(sorry that i cant describe it better)

Hi There,

I need your help,

I can't seem to get this work, which it theorecticly should work any ideas?

<script>

var x = 3

switch(x){
case x > 0:
alert("overdue")
break

case x = 0:
alert("due today")
break

case x < 0:
alert("will be due")
break
}
</script>

Much thanks for everyones help.

Cheers,

Jay