DDK
DDK

Reputation: 35

print selected information from select box by HTML

//I want to print selected information from selection of select box. But I don't know why the function 'print_info' doesn't work in my code. I think there's a problem in print_info's div tag because I can't see color icon next to the 'background-color'. Please let me know where should I fix.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>

    <body style="text-align: center; background-color:#9191e988">
        <div style="position: absolute; left: 60px; border:white; background-color:white; padding:10px;">
            <p><font size="2">Select route</font></p>
            <form>
                <select name="number" id="NUM" onchange="changenumSelect(this.value)">
                    <option value=""disabled>select num</option>
                    <option value="n1"selected>n1</option>
                    <option value="n2">n2</option>
                    <option value="n3">n3</option>
                </select>
            </form>
        </div>

        <script> function chageRouteSelect(r){ 
            if (r=="n1")
                print_info(11, 22, "a", "b", 33);
            else if(r=="n2")
                print_info(44, 55, "c", "d", 66);
            else if(r=="n3")
                print_info(77, 88, "e", "f", 99);
        </script>
            
        <script> function print_info(num1, num2, stp1, stp2, dist){
            <div style="position: absolute; left: 60px; top: 70px; border: 5px; background-color:white; padding:20px;">
                <font size="5">main number</font>
                document.write("about ".bold()+num1+"<br/>".bold());
                document.write("sub number "+num2+"<br/>");
                document.write("begin: "+stp1+"<br/>↕<br/> end: "+stp2+"<br/>");
                document.write("distance: "+dist+"km");
            </div>
            }
        </script>
    </body>
</html>

Upvotes: 1

Views: 262

Answers (2)

WhiteEagle
WhiteEagle

Reputation: 81

I've written a slightly more neat solution. In terms of styling and JavaScript. It's also a one-page solution.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Route Info</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #9191e988
        }

        .select-box {
            border-radius: 5px;
            text-align: center;
            background-color: white;
            padding: 10px;
            width: 100px;
            margin: 20px auto 20px 20px;
        }

        .info {
            border-radius: 5px;
            background-color: white;
            margin-top: 10px;
            padding: 20px;
            width: 250px;
            margin: 20px auto 20px 20px;
        }
    </style>
</head>

<body>
    <div class="select-box">
        <h4>Select route</h4>
        <form>
            <select name="number" id="NUM" onchange="changenumSelect(this.value)">
                <option value="">select num</option>
                <option value="n1">n1</option>
                <option value="n2">n2</option>
                <option value="n3">n3</option>
            </select>
        </form>
    </div>
    <div id="info" class="info" style="display: none;">
        <b>main number <span id="main-number"></span></b> <br>
        sub number: <span id="sub-number"></span><br>
        begin: <span id="begin"></span><br>
        end: <span id="end"></span><br>
        distance (km): <span id="dist"></span>
    </div>

    <script>
        function changenumSelect(r) {
            if (r == "n1")
                print_info(11, 22, "a", "b", 33);
            else if (r == "n2")
                print_info(44, 55, "c", "d", 66);
            else if (r == "n3")
                print_info(77, 88, "e", "f", 99);
        }

        function print_info(num1, num2, stp1, stp2, dist) {
            const info = document.getElementById("info");

            if (info.style.display === "none") {
                info.style.display = "block";
            }
            const main = document.getElementById("main-number");
            const sub = document.getElementById("sub-number");
            const begin = document.getElementById("begin");
            const end = document.getElementById("end");
            const distance = document.getElementById("dist");
            main.textContent = num1;
            sub.textContent = num2;
            begin.textContent = stp1;
            end.textContent = stp2;
            distance.textContent = dist;
        }
    </script>
</body>

</html>

Upvotes: 2

Fawzi Najjar
Fawzi Najjar

Reputation: 21

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>

    <body style="text-align: center; background-color:#9191e988">
        <div style="position: absolute; left: 60px; border:white; background-color:white; padding:10px;">
            <!-- 1-  <p><font size="2">Select route</font></p> // <font> tag Element not supported by html5 better not to use -->
            <p style='font-size: 2;'>Select route</p>
            <form>
                <select name="number" id="NUM" onchange="changenumSelect(this.value)">
                    <option value=""disabled>select num</option>
                    <option value="n1"selected>n1</option>
                    <option value="n2">n2</option>
                    <option value="n3">n3</option>
                </select>
            </form>
        </div>

        <script>
        // changenumSelect not chageRouteSelect
        function changenumSelect(r){ 
            if (r=="n1")
                print_info(11, 22, "a", "b", 33);
            else if(r=="n2")
                print_info(44, 55, "c", "d", 66);
            else if(r=="n3")
                print_info(77, 88, "e", "f", 99);
        
        // "}" missing !
        }
        </script>
    
        <script> function print_info(num1, num2, stp1, stp2, dist){
            // Fix Notes 
            // ↕ symbol was used beside + "document.write("begin: "+stp1+"<br/>"↕"<br/> end: "+stp2+"<br/>");"
            // All Html tags and strings must be rapped in qoutes and be seperated from Variables and Javascript
            '<div style="position: absolute; left: 60px; top: 70px; border: 5px; background-color:white; padding:20px;">'
                +
                '<font size="5">' // better not to use
                + 
                'main number'
                +
                '</font>' // better not to use
                +
                document.write("about ".bold()+num1+"<br/>".bold());
                document.write("sub number "+num2+"<br/>");
                document.write("begin: "+stp1+"<br/>"+"<br/> end: "+stp2+"<br/>");
                document.write("distance: "+dist+"km");
                +
            '</div>'
            }
        </script>
    </body>
</html>

Upvotes: 2

Related Questions