How to display images using Switch statement? - javascript

I'm working on a Mass Effect personality quiz that has been adapted from the EasyDamus D&D quiz from the 90s, and I'm having trouble with the results page. Namely, I'm trying to include an image to match each result, but I don't know how to do so when the code implements the results using a switch statement. Here is a snippet of the code:
var win = window.open("", "win","width=900,height=550,top=25,left=50,toolbar=yes,menubar=yes,scrollbars=yes,resizable=yes,location=yes");
with (win.document) {
open("text/html", "replace");
write("<html><head><link rel='stylesheet' type='text/css' href='index.css'><title>Your Results Are In!\<\/title>\<\/head>");
write("<body text='#FFFFFF' font-family='massEffect' link='#5555FF' vlink='#6666EE' bgcolor='#F2ECDA' background='images/space.png'>");
write("<center><h2><b><font color='#FFFFFF'>You Are A:\<\/font>\<\/b>\<\/h2>\<\/center>");
write("<br><center><h1><b>");
switch (race) {
case "human": write("Human\<\/b> "); break;
case "asari": write("Asari\<\/b> "); break;
case "turian": write("Turian\<\/b> "); break;
case "salarian": write("Salarian\<\/b> "); break;
case "krogan": write("Krogan\<\/b> "); break;
case "quarian": write("Quarian\<\/b> "); break;
case "geth": write("Geth\<\/b> "); break;
case "volus": write("Volus\<\/b> "); break;
case "rachni": write("Rachni\<\/b> "); break;
case "batarian": write("Batarian\<\/b> "); }
switch (primclass) {
case "soldier": write(" Soldier"); break;
case "infiltrator": write(" Infiltrator"); break;
case "engineer": write(" Engineer"); break;
case "adept": write(" Adept"); break;
case "sentinel": write(" Sentinel"); break;
case "vanguard": write(" Vanguard"); }
switch (secclass) {
case "soldier": write("/Soldier"); break;
case "infiltrator": write("/infiltrator"); break;
case "engineer": write("/Engineer"); break;
case "adept": write("/Adept"); break;
case "sentinel": write("/Sentinel"); break;
case "none": write(""); break;
case "vanguard": write("/Vanguard"); }
write("<br><h2><br>Race:<br></h2>");
switch (race) {
case "human": `
The last line is the flavor text for each result, and while there's no issue with how it displays, I'm trying to find a way to have an image precede it. I have the pictures available, most of them in array called from a local folder. What would be the best way to have the images appear?
I've searched for solutions for a few weeks, most of which recommend event listeners, but I haven't been able to get it to work for me.

This code does a lot of stuff. First of all with switch statement, it should set up some variable for a particular case. Also its always a good practice to provide a default case for each switch-statement.
function decideOnRace(race) {
let result = '';
switch (race) {
case "human":
result = "Human\<\/b> ";
break;
default:
result = 'something else";
break;
}
}
// place this accordingly
const raceTextToWrite = decideOnRace(race);
write(raceTextToWrite);
Following this practice for all the different cases should help you progress e.g., for secclass, primclass, etc.

Related

calling switch statement from outside of component

I have kind of big switch statement for my weather app and I got a lot of ids going on and I found it makes my main file so big so I wanted to make a file for all of my switch statement and call it in my component but I could not
here is the switch code
export function switchCode (id){
switch(id){
case 200:
case 201:
case 202:
case 210:
case 211:
case 212:
case 221:
case 230:
case 231:
case 232:
console.log('thunder_icon');
break;
case 300:
case 301:
case 302:
case 310:
case 311:
case 312:
case 313:
case 314:
case 321:
console.log('cloud rainy');
break;
case 500:
case 501:
case 502:
case 503:
case 504:
case 511:
case 520:
case 521:
case 522:
case 531:
console.log('rainy with sun');
break;
case 600:
case 601:
case 602:
case 611:
case 612:
case 615:
case 616:
case 620:
case 621:
case 622:
console.log('snow icon');
break;
case 701:
case 711:
case 721:
case 731:
case 741:
case 751:
case 761:
case 762:
case 771:
case 781:
console.log('hot icon or just sun or fog');
break;
case 800:
console.log('big sunny');
break;
case 801:
case 802:
case 803:
case 804:
console.log('sun with cloud');
break;
}}
I tried to access as {this.props.switchCode(500)} and didn't work, just gave me blank space.
please, guys, help
thanks
When you are importing the function switchCode using:
import {switchCode} from './switch_weather_codes';
The switchCode function is available as a local variable. You just need to access it using:
switchCode(id);
Note that this will just call the console.log() function. If you really need the value inside that, change the console.log() to return.
When you try to use this.props.switchCode(id), React tries to find a property that's switchCode, which is not, but just a local variable. Replace the this.props.switchCode(id) with the above code.
Replace console.log with a return statement.
export function switchCode (id){
switch(id){
case 200:
case 201:
case 202:
case 210:
case 211:
case 212:
case 221:
case 230:
case 231:
case 232:
return 'thunder_icon';
break;
...
}}

How exactly are JS Case Switches supposed to be formatted?

So I have been working on a Discord bot for my server for a few days using Node.js and am brand new to JS. I am trying to convert some of the code from a Magic 8 Ball completed after a model for a tutorial to JS to Implement as a function (just the random number and case switch).
This is from the C# Project:
switch (random.Next(4))
{
case 0:
Console.WriteLine("YES");
speechSynthesizer.Speak("Yes");
break;
case 1:
Console.WriteLine("NO");
speechSynthesizer.Speak("No");
break;
case 2:
Console.WriteLine("HELL NO");
speechSynthesizer.Speak("Hell no");
break;
case 3:
speechSynthesizer.Speak("Hell yes");
Console.WriteLine("HELL YES");
break;
}
and this is in what I am trying to implement:
switch( Math.random.Next(4)) {
case 0:
msg.channel.send('Yes');
break;
case 1:
msg.channel.send('No');
break;
case 2:
msg.channel.send('Hell yes!');
break;
case 3:
msg.channel.send('Hell No!');
break;
}
I am essentially trying to add a part where you can send "Magic 8 Ball", and it will return a Yes/No/Hell Yes/Hell No.
Edit:
So I followed the advice of a comment, and switched "case" to all lowercase in each instance. The error I recieve now is that math is undefined. Another article just suggested switching math to Math. next is not a function.
If your problem is generating a random int to use in your switch, you'll need to know how to generate a pseudorandom int in the first place.
Math.random generates a a float in the range of [0, 1)
So you'll need to take that value, multiply it by your max, and then floor it to turn it in to an integer.
Math.floor(Math.random() * max)
Your final code would look like this:
switch(Math.floor(Math.random() * 4))) { // 4 is maximum n of options
case 0:
msg.channel.send('Yes');
break;
case 1:
msg.channel.send('No');
break;
case 2:
msg.channel.send('Hell yes!');
break;
case 3:
msg.channel.send('Hell No!');
break;
}

Swap background-color of a specific div with switch/case

I'm trying to swap the background-color of some specific divs basing on their content.
Their background-color should swap when their input is like "Lifestyle" or "Politics" or "Economy" or "Local" or "Sports" or "News".
var colorInput = document.getElementById('views-field-field-section').textContent;
switch (colorInput) {
case 'Lifestyle':
document.getElementById('views-field-field-section').style.backgroundColor = '#9518b8';
break;
case 'Local':
document.getElementById('views-field-field-section').style.backgroundColor = '#009fe3';
break;
case 'Sports':
document.getElementById('views-field-field-section').style.backgroundColor = '#95c11f';
break;
case 'Economy':
document.getElementById('views-field-field-section').style.backgroundColor = '#d40d10';
break;
case: 'Politics':
document.getElementById('views-field-field-section').style.backgroundColor = '#ffcc00';
break;
default:
break;
}
http://jsfiddle.net/gFN6r/501/
You cannot use ids more than once in an html document. This would be invalid html. I have changed the id to a class, and then used the following code and it works:
var colorInput = document.getElementsByClassName('views-field-field-section');
for(i=0; i<colorInput.length; i++) {
var colorInputText = colorInput[i].textContent.trim();
switch (colorInputText) {
case 'Lifestyle':
colorInput[i].style.backgroundColor = '#9518b8';
break;
case 'Local':
colorInput[i].style.backgroundColor = '#009fe3';
break;
case 'Sports':
colorInput[i].style.backgroundColor = '#95c11f';
break;
case 'Economy':
colorInput[i].style.backgroundColor = '#d40d10';
break;
case 'Politics':
colorInput[i].style.backgroundColor = '#ffcc00';
break;
default:
text ='Nix!';
}
}
Here is the jsfiddle:
http://jsfiddle.net/gFN6r/505/
Oh man. Don't use the same id :) But if it is necessary, ok...
I adjusted a little bit your source code, e.g. there was some syntax error, and added jQuery, hope it's not a problem :)
If you use the same id, this will not work - $('#myid'), but this will - $('[id=myid]')
Don't forget to use trim-like function to remove trailing spaces.
And please think a little about how to avoid the same id in your code.
http://jsfiddle.net/gFN6r/506/
$('[id=views-field-field-section]').each(function() {
var text = $(this).text();
text = $.trim(text);
switch (text) {
case 'Lifestyle':
$(this).css({backgroundColor: '#9518b8'});
break;
case 'Local':
$(this).css({backgroundColor: '#009fe3'});
break;
case 'Sports':
$(this).css({backgroundColor: '#95c11f'});
break;
case 'Economy':
$(this).css({backgroundColor: '#d40d10'});
break;
case 'Politics':
$(this).css({backgroundColor: '#ffcc00'});
break;
default:
$(this).text('Nix!');
break;
}
});
Here you have it using jQuery to simplify plunker.
The id is set on the containing parent, while you need to iterate over the children and to check for their content. Note that I've used .trim() to eliminate start and trailing spaces so the match case would catch.
Enumerate use abs 1 -1 =0 -1 = -1(abs) gets you back to 1 so if you start with $case=1 and just -1 as an absolute value you will tick tock between 1 & 0 either way you always subtract 1

How to write my answer in a variable?

I have a problem with writing my code dynamic. I am doing a course in javascript programming and I am having some struggles with the final part of one assignment.
Exercise 8.2
Extend your switch-case statement with a default value. The result should
be 'That is an unknown fruit.' when the variable 'myFruit' has an unknown
value. Answer with the result where 'myFruit = pear'.
Write your code below and put the answer into the variable ANSWER.
var myFruit = "pear";
switch (myFruit) {
case "banana":
console.log("The banana is yellow.");
break;
case "apple":
console.log("The apple is green.");
break;
case "kiwi":
console.log("The kiwi is green.");
break;
case "plum":
console.log("The plum is purple");
break;
default:
console.log("That is an unknown fruit.");
break;}
How do I formulate this result in a variable?
I have tried to write like this:
var result = switch (myFruit);
But that does not work.
You can declare the result variable, and inside the switch statement cases, instead of console.logging the result, you can assign the value to the result variable, like so:
var myFruit = "pear";
var result;
switch (myFruit) {
case "banana":
result = "The banana is yellow.";
break;
case "apple":
result = "The apple is green.";
break;
case "kiwi":
result = "The kiwi is green.";
break;
case "plum":
result = "The plum is purple";
break;
default:
result = "That is an unknown fruit.";
break;
}
http://jsfiddle.net/uqxtmc25/
I won't write out all the code for you, but point you in the right direction. You need to set the text in a variable and return it:
switch ..
case "something":
var message = "Your message here.";
break;
...
Once your switch sets the value, then you use it as you need to.
You cannot return a value from a switch statement by using the switch statement like an operation.
You can not call the switch statement like var result = switch (myFruit);, it is not a function. You would have to move all the switch case code into a function:
function mySwitchCase(fruit){
var returnResult='';
switch (fruit) {
case "banana":
returnResult="The banana is yellow.";
break;
case "apple":
returnResult="The apple is green.";
break;
case "kiwi":
returnResult"The kiwi is green.";
break;
case "plum":
returnResult"The plum is purple";
break;
default:
returnResult"That is an unknown fruit.";
break;
}
return returnResult;
}
then you can call it like this:
var result = mySwitchCase(myFruit);
You can save the result in a variable answer and then use that variables to print out the result;
function fruitSwitcher (myFruit) {
var answer = "That is an unknown fruit.";
switch (myFruit) {
case "banana":
answer = "The banana is yellow.";
break;
case "apple":
answer = "The apple is green.";
break;
case "kiwi":
answer ="The kiwi is green.";
break;
case "plum":
answer = "The plum is purple";
break;
default:
// no really needed
answer ="That is an unknown fruit.";
break;
}
return answer;
}
var myFruit = "pear";
var answer = fruitSwitcher(myFruit);
console.log(answer); //That is an unknown fruit.
The default case in the previous code is superfluous as the variable answer is initialised to a default value. If an unknown fruit in passed in input, none of the switch cases matches it and, therefore, the answer variables never changes value and the function returns the default value.

Javascript switch not working with <option> tag values

I have the following HTML:
<select id="rankBox">
<option value="0">100</option>
<option value="1">150</option>
<option value="2">200</option>
<option value="3">250</option>
<option value="4">300</option>
<option value="5">350</option>
<option value="6">400</option>
</select>
<input type="Submit" id="button1" value="Generate" onclick="doStuff()">
and the following Javascript:
function doStuff() {
var choice = $("#rankBox option:selected").val();
console.log(choice);
switch (choice) {
case 0:
case 1:
colorQ = "^7";
break;
case 2:
colorQ = "^L";
break;
case 3:
colorQ = "^A";
break;
case 4:
colorQ = "^8";
break;
case 5:
colorQ = "^+";
break;
case 6:
colorQ = "^<";
break;
default:
alert("Something went wrong");
break;
}
alert(colorQ);
}
In short, I have a switch statement which is supposed to check the value of the option the user has selected. As you may see, I have added console.log to see if the problem is with acquiring the user's input, but that is not the issue. The issue is the switch statement, which just does not work.
Am I using wrong syntax or something?
jsFiddle: http://jsfiddle.net/3qTHW/2/ (jsFiddle doesn't work in my browser at all, says doStuff() is not defined)
Thanks in advance.
It's not an integer, it's a string, as all values from an element are strings.
You'll have to either parse it as an integer :
function doStuff() {
var choice = parseInt( $("#rankBox option:selected").val(), 10);
....etc
or change the switch to work with strings (you should be trimming)
switch ( $.trim(choice) ) {
case '0':
case '1':
....etc
This was an easy problem, by looking at the code one could see that the line var choice = $("#rankBox option:selected").val(); is adding string to variable choice. And that is the reason none of the case statements worked and the default code executed.
The best way not to run into such problems is to "Debug" your JavaScript code properly. This will save you a lot of precious time and you will find the root cause to each problem yourself.
To debug your code, you can use Firebug extension in Firefox. This will actually stop the code execution for you and guide you line by line telling you the state of each variable at every line of code. So in case of your problem, all I did was add your code in .html file and ran it in Firefox with "Debugger" points specified. The JS code looked like this.
function doStuff() {
var choice = $("#rankBox option:selected").val();
debugger; // This is the point where the debugging starts
console.log(choice); // console.log wont help as it did not tell me the type
switch (choice) { // Here Firebug tells me that choice is actually a string
case 0:
case 1:
colorQ = "^7";
break;
case 2:
colorQ = "^L";
break;
case 3:
colorQ = "^A";
break;
case 4:
colorQ = "^8";
break;
case 5:
colorQ = "^+";
break;
case 6:
colorQ = "^<";
break;
default:
alert("Something went wrong");
break;
}
alert(colorQ);
}
Note I put a "debugger" above console.log(). From this point onward, the code stopped at each line and I could see the value in each variable. This helped me notice string value in choice.
Happy Debugging :)
Use javascript parseInt() method like this :
var choice = parseInt($("#rankBox option:selected").val());

Categories

Resources