Javascript 通过HTML打印选择框中的选定信息_Javascript_Html

Javascript 通过HTML打印选择框中的选定信息

javascript html

Javascript 通过HTML打印选择框中的选定信息,javascript,html,Javascript,Html,//我想打印从选择框中选择的信息。但是我不知道为什么“print_info”函数在我的代码中不起作用。我认为print_info的div标签有问题，因为我看不到“背景色”旁边的颜色图标。请告诉我应该在哪里修理 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body style="t

//我想打印从选择框中选择的信息。但是我不知道为什么“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>


选择路线
选择num
n1
氮气
n3
函数chageroutselect（r）{
如果（r==“n1”）
打印信息（11、22、“a”、“b”和33）；
否则，如果（r==“n2”）
打印信息（44、55、“c”、“d”和66）；
否则，如果（r==“n3”）
打印信息（77,88，“e”，“f”，99）；
功能打印信息（num1、num2、stp1、stp2、dist）{
主要号码
document.write（“about.bold（）+num1+”
“.bold（））；
文件。填写（“子编号”+num2+“
”；
文档。写入（“开始：+stp1+”
↕
结束：“+stp2+”
”；
文件。写入（“距离：“+dist+”km”）；
}


选择路线
选择num
n1
氮气
n3
//changenumSelect非ChagerOutSelect
函数更改numselect（r）{
如果（r==“n1”）
打印信息（11、22、“a”、“b”和33）；
否则，如果（r==“n2”）
打印信息（44、55、“c”、“d”和66）；
否则，如果（r==“n3”）
打印信息（77,88，“e”，“f”，99）；
//“}”不见了！
}
功能打印信息（num1、num2、stp1、stp2、dist）{
//固定注释
// ↕ 符号在“+”文档旁边使用。写入（“开始：+stp1+”
”↕"
结束：“+stp2+”
；”
//所有Html标记和字符串必须在qoutes中敲打，并与变量和Javascript分离
''
+
''//最好不要使用
+ 
“主要号码”
+
''//最好不要使用
+
document.write（“about.bold（）+num1+”
“.bold（））；
文件。填写（“子编号”+num2+“
”；
文件。写（“开始：“+stp1+”
“+”
结束：“+stp2+”
”）；
文件。写入（“距离：“+dist+”km”）；
+
''
}


选择路线
选择num
n1
氮气
n3
//changenumSelect非ChagerOutSelect
函数更改numselect（r）{
如果（r==“n1”）
打印信息（11、22、“a”、“b”和33）；
否则，如果（r==“n2”）
打印信息（44、55、“c”、“d”和66）；
否则，如果（r==“n3”）
打印信息（77,88，“e”，“f”，99）；
//“}”不见了！
}
功能打印信息（num1、num2、stp1、stp2、dist）{
//固定注释
// ↕ 符号在“+”文档旁边使用。写入（“开始：+stp1+”
”↕“
结束：“+stp2+”
；”
//所有Html标记和字符串必须在qoutes中敲打，并与变量和Javascript分离
''
+
''//最好不要使用
+ 
“主要号码”
+
''//最好不要使用
+
document.write（“about.bold（）+num1+”
“.bold（））；
文件。填写（“子编号”+num2+“
”；
文件。写（“开始：“+stp1+”
“+”
结束：“+stp2+”
”）；
文件。写入（“距离：“+dist+”km”）；
+
''
}

我已经编写了一个稍微简洁的解决方案。在样式和JavaScript方面。这也是一个单页解决方案


路线信息
* {
保证金：0；
填充：0；
}
身体{
背景色：#9191e988
}
.选择框{
边界半径：5px；
文本对齐：居中；
背景色：白色；
填充：10px；
宽度：100px；
利润率：20px自动20px 20px；
}
.info{
边界半径：5px；
背景色：白色；
边缘顶部：10px；
填充：20px；
宽度：250px；
利润率：20px自动20px 20px；
}
选择路线
选择num
n1
氮气
n3
主号码

子编号：

开始：

结束：

距离（公里）：
函数更改numselect（r）{
如果（r==“n1”）
打印信息（11、22、“a”、“b”和33）；
否则，如果（r==“n2”）
打印信息（44、55、“c”、“d”和66）；
否则，如果（r==“n3”）
打印信息（77,88，“e”，“f”，99）；
}
功能打印信息（num1、num2、stp1、stp2、dist）{
const info=document.getElementById（“info”）；
如果（info.style.display==“无”）{
info.style.display=“块”；
}
const main=document.getElementById（“主编号”）；
const sub=document.getElementById（“子编号”）；
<!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>