0

Alright, so I come to you guys to see what I am doing wrong here.

This is just a simple "Switch" statement, up to the number 5.

Now, I could write if/else and it comes out fine, but I want to get switch statements to work so here is the snippet and it is not working correctly, as it should write "one"-"five", anything over "5 or five" should state that.

I have researched this and tried the document.getElementById("message").innerHTML = (firstName + ", " + number + " is written " + result); for each switch statement, but does nothing either.

Also, the CodePen is here

    function changeText() {
            var firstName = document.getElementById("fNameBox").value;
            var number = document.getElementById("numberBox").value;
            var result;
            parseFloat(number);

            switch (number) {
                case 1:
                    result = "one";
                    break;
                case 2:
                    result = "two";
                    break;
                    case 3:
                    result = "three";
                    break;
                    case 4:
                    result = "four";
                    break;
                    case 5:
                    result = "five";
                    break;
                default:
                    result = "is not a valid number";
            }
                document.getElementById("message").innerHTML = (firstName + ", " + number + " is written " + result);
            }
            function clearText() {
                document.getElementById("message").innerHTML = ("<br>");
                document.getElementById("fNameBox").value = "";
                document.getElementById("numberBox").value = "";
            }
#main {
                -moz-border-radius-topleft: 4px;
                -moz-border-radius-topright: 3px;
                -moz-border-radius-bottomright: 6px;
                -moz-border-radius-bottomleft: 10px;
                -moz-box-align: center;
            }

            body {
                background-color: #8f93ad;
                text-align: center;
                border-radius: 10px;
                font-family: Montserrat;
            }

            /* This is a custom snippet I made so the footer always stays at the bottom of the page */
            footer {
                position: absolute;
                right: 0;
                position: absolute;
                right: 0;
                bottom: 0;
                left: 0;
                padding: 1rem;
                background-color: transparent;
                text-align: center;
            }

            #myForm {
                margin-top: 1rem;
                border-bottom: 0.6px solid black;
                border-top: 0.9px solid black;
                border-left: 0.9px solid black;
                border-right: 0.6px solid black;
                border-radius: 30px;
                margin-bottom: 1rem;
            }

            .btn1,
            .btn2 {
                background-color: rgb(56, 56, 223);
                border: #2e6da4;
                font-family: Arial, Geneva, Arial, Helvetica, sans-serif;
                font-size: 18px;
                color: #fff;
                letter-spacing: 2px;
                padding: 8px 12px;
                font-size: 14px;
                font-weight: normal;
                border-radius: 4px;
                line-height: 1.5;
                text-decoration: none;
                box-shadow: 0 0 4px black;
            }
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
        <title>Switch</title>
    </head>
    <body>
        <div id="main">
            <div id="header">
                <h1>Program 7</h1>
                <h5>Written Number Program</h5>
            </div>

            <form id="myForm"><br>
                <label>First Name:</label>
                <input type="text" id="fNameBox"><br>
                <br>
                <label>Enter A Number (from 1 to 5):</label> <input type="number" id="numberBox"><br><br>
            </form>

            <p id="demo">Output:</p>
            <p id="message"> <br> </p>

                <button type="button" class="btn1" onClick="changeText()">Submit </button>
                <span>|</span>
                <button type="button" class="btn2" onClick="clearText()">Clear </button>
            <div>
                <footer>Created By <a href="https://spragginsdesigns.com">Austin Spraggins</a></footer>
            </div>
        </div>
    </body>
</html>
Spraggins Designs
  • 69
  • 8
  • 2
    "*This is just a simple "Switch" statement*" - actually it's **5** switch statements… You really should make that a single `switch` with 6 different cases. – Bergi Sep 28 '21 at 20:09
  • 1
    You only need one `switch (number) { ... }` statement which contains all the cases. Take a look at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch – skyline3000 Sep 28 '21 at 20:10
  • One switch statement should encompasses your 5 cases and default case. Have you looked at the documentation? – mykaf Sep 28 '21 at 20:10
  • @Bergi also applicable: 5 *very* roundabout `if` statements. – VLAZ Sep 28 '21 at 20:10
  • 1
    The problem is that `number` is not a number but a string. Your `if` statements work because they use `==` for comparison – Bergi Sep 28 '21 at 20:11
  • Okay, I thought so! So I added: `function changeText() { var firstName = document.getElementById("fNameBox").value; var number = document.getElementById("numberBox").value; var result; switch (number) { case 1: result = "one"; break case 2: result = "two"; case 3: result = "three"; case 4: result:"four"; case 5: result = "five"; default: result = "over five"; }` and it did not work – Spraggins Designs Sep 28 '21 at 20:24
  • Problem is, I cannot use the if/else statements, I need it to work with the switch ones which I have never done. I am not looking for the answer, just someone who knows it and can point me in the right direction. I have tried combining them as 1-5, and other ways but nothing seems to work right. – Spraggins Designs Sep 28 '21 at 20:36
  • I figured it out here: https://codepen.io/agtshadow/pen/oNwmgEz – Spraggins Designs Sep 28 '21 at 20:57
  • The statement `parseFloat(number);` does nothing to the `number` variable but to read it. You'd want `number = parseFloat(number);` – Bergi Sep 28 '21 at 20:57
  • I figured it out myself: https://codepen.io/agtshadow/pen/oNwmgEz but thank you for your guys's input. – Spraggins Designs Sep 28 '21 at 20:58

0 Answers0