search

Home  >  Q&A  >  body text

Switch Statement: A Guide to Displaying Images

I'm making a Mass Effect personality quiz adapted from the EasyDamus D&D quiz from the 90s, but I'm having trouble using the results page. That is, I'm trying to include an image to match each result, but I don't know what to do when the code uses a switch statement to implement the results. Here is the code snippet: 

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 problem with the way it displays, I'm trying to find a way to put an image in front of it. I have images available, most of them are arrays called from a local folder. What's the best way to get the image to appear?

I've been searching for solutions for weeks and most of them recommend event listeners but I haven't been able to get it to work for me.

P粉557957970P粉557957970327 days ago469

reply all(1)I'll reply

  • P粉413704245

    P粉4137042452024-01-30 11:27:51

    This code does a lot of things. First, for the switch statement, it should set some variables for the specific situation. Also, it's always a good practice to provide a default case for every 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 approach in all different situations should help you progress, e.g. for secclass, primclass, etc.

    reply
    0
  • Cancelreply