HTML实现select下拉框打印选中信息时print_info函数不生效问题求助

需修正的位置 #

• 1 函数名不匹配：select标签的onchange属性绑定的函数名是changenumSelect，但实际定义的处理函数名为chageRouteSelect，二者名称不一致导致触发事件时找不到对应函数。
• 2 JavaScript语法错误：print_info是JS函数，内部不能直接写HTML标签，需要将div的HTML内容拼接为字符串后通过document.write输出，你直接把div标签写在JS代码块里，编辑器自然无法识别其中的CSS属性，所以不显示颜色标识。
• 3 函数结构不全：chageRouteSelect函数定义末尾缺少闭合的大括号}，语法不完整。
• 4 border属性写法错误：两处div的border属性只写了单一值，不符合CSS规范，完整border属性需要包含宽度 + 样式 + 颜色三个参数，比如border: 1px solid white。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body style="text-align: center; background-color:#9191e988">
    <div style="position: absolute; left: 60px; border:1px solid white; background-color:white; padding:10px;">
        <p><font size="2">Select route</font></p>
        <form>
            <select name="number" id="NUM" onchange="chageRouteSelect(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){ 
        document.write('<div style="position: absolute; left: 60px; top: 70px; border:1px solid #ccc; background-color:white; padding:20px;">');
        document.write('<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");
        document.write('</div>');
    }
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者DDK