通过 HTML 从 select 框中打印所选信息

Question

//我想打印从 select 框中选择的信息。 但我不知道为什么 function 'print_info' 在我的代码中不起作用。 我认为 print_info 的 div 标签有问题，因为我看不到“背景颜色”旁边的颜色图标。 请让我知道我应该在哪里修复。

<!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>

Answer 1

<!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>

Answer 2

我写了一个更简洁的解决方案。 在造型和 JavaScript 方面。 这也是一个单页解决方案。

 <: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>

通过 HTML 从 select 框中打印所选信息

问题描述

2 个解决方案

解决方案1
2 2021-05-31 00:24:54

解决方案2
2 2021-05-31 03:51:22

通过 HTML 从 select 框中打印所选信息

问题描述

2 个解决方案

解决方案1 2 2021-05-31 00:24:54

解决方案2 2 2021-05-31 03:51:22

解决方案1
2 2021-05-31 00:24:54

解决方案2
2 2021-05-31 03:51:22