将文档类型切换为HTML5后,为什么我的JavaScript调用无法以某种形式工作

我有一个使用JavaScript根据用户选择显示其他字段的表单.使用XHTML 1.1 doctype(不是我的选择… me脚的学校项目指南),代码可以正常工作,但是切换到HTML5 doctype后没有任何效果.我可以使任何JavaScript在表单中运行的唯一方法是将其直接放在onchange =“”设置中；仅仅添加那里的函数调用是行不通的.我也尝试过事件监听器,但这也不起作用.

为了简单起见,我只显示其中一个动态字段的代码：

<!DOCTYPE html>
<html><head>
<?PHP include "PHPself.PHP"; ?>
<Meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<script type="text/javascript">
document.getElementById("visitor").addEventListener("change", function(ev) {
        Visitor();
        });

function Visitor() {
    var visitor = document.getElementById("visitor").value;

    if (visitor=="Other") {
        var othertext="<label>What would you consider yourself?</label><br/><input type="text" name="other_visitor" id="other_visitor"/>";
        document.getElementById("vother").innerHTML=(othertext);
    }
}
</script>
</head><body>

<form action=\"".getPHPSelf()."\" enctype="text/plain" method="post" onsubmit="return FormValid();" >

<fieldset style="width=50%;">
<legend>Comments</legend>
    <label>I am a:</label>
        <select name="visitor" id="visitor" onchange="Visitor();">
        <option value="" disabled selected style="display:none;">select...</option>
        <option value="Friend">Friend</option>  
        <option value="Client">Client</option>
        <option value="Other">Other</option>
        </select>
    <br/><br/><div id="vother"></div>

<input type="submit" value="Submit"/><input type="reset" value="Reset"/>
    </fieldset>
    </form>
</body></html>

我知道其他人也曾问过类似的问题,但是我发现这些答案都对我没有帮助.

解决方法:

我已验证您代码中的一些问题：

>此行无效(语法错误)：

var othertext="<label>What would you consider yourself?</label><br/><input type="text" name="other_visitor" id="other_visitor"/>";

您应该转义双引号,或将其替换为单引号.

这将起作用：

var othertext = "<label>What would you consider yourself?</label><br/><input type=text name='other_visitor' id='other_visitor' />";

>摆脱内联onchange =“ Visitor();活页夹或document.getElementById(” visitor“).addEventListener.您应该选择一种方法.
>移动您的< script>标记到您身体的底部(就在< / body>之前).或者将代码包装到DOMContentLoaded事件(IE9)中.
>(可选).您无需在此处加上括号(othertext)：

document.getElementById("vother").innerHTML = (othertext);

工作代码：https://jsfiddle.net/mrlew/txk11m6c/

将文档类型切换为HTML5后,为什么我的JavaScript调用无法以某种形式工作

相关推荐