第二个存在条件不起作用答案

【问题标题】：Second exists condition does not work第二个存在条件不起作用
【发布时间】：2015-03-30 16:24:59
【问题描述】：

我有一个关于 javascript 的问题，我有两个条件来检查输入字段是否存在。但它只告诉我“opleiding存在”，而不是“opleiding存在”和“domein存在”。

请告诉我我的代码有什么问题。

非常感谢！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function submit()
{
    var opleiding = document.getElementById("opleiding");
    var domein = document.getElementById("domein");

    if(document.getElementById("opleiding")){
        document.write("opleiding exists");
    }

    if (document.getElementById("domein")){
        document.write("domein exists");
    }
}
</script>
</head>
<body>
<input type="hidden" id="domein" value="domein" />
<input type="hidden" id="opleiding" value="opleiding" />

<div id="button" onclick="submit()">
<strong>button text</strong>
</div>
</body>
</html>

【问题讨论】：

了解document write 的工作原理。
document.write 会覆盖页面中之前的数据
把你的document.write改成alert，你就会得到答案。

标签： javascript exists

【解决方案1】：

document.write 将覆盖页面中的现有内容。这就是为什么您只能在消息中看到的原因。

您必须改用document.body.appendChild 来显示两条错误消息。

function submit()
{
var opleiding = document.getElementById("opleiding");
var domein = document.getElementById("domein");
var textElement;
if(document.getElementById("opleiding")){
    textElement = document.createElement("p");
    textElement.textContent = "opleiding exists";
    document.querySelector("#results").appendChild(textElement);
}

if (document.getElementById("domein")){
    textElement = document.createElement("p");
    textElement.textContent = "domein exists";
    document.querySelector("#results").appendChild(textElement);
}
}

<body>
<input type="hidden" id="domein" value="domein" />
<input type="hidden" id="opleiding" value="opleiding" />
<div id="results"></div>
<div id="button" onclick="submit()">
<strong>button text</strong>
</div>
</body>

【讨论】：

感谢您的详细评论！

【解决方案2】：

您应该避免使用document.write，因为这是一种已弃用的方法。当您第一次使用它时，它会写下您想要的内容，但根据其定义删除页面的所有内容。

要做你想做的事，你应该“写”使用document.body.appendChild来附加一些包含文本的元素（如<div>），或者向document.body.innerHTML添加一些文本，这是一个例子：

function submit() {
    var opleiding_div = document.createElement('div'),
        domein_div = document.createElement('div');

    opleiding_div.textContent = "opleiding exists";
    domein_div.textContent = "domein exists";

    if(document.getElementById("opleiding")){
        document.body.appendChild(opleiding_div);
    }

    if (document.getElementById("domein")){
        document.body.appendChild(domein_div);
    }
}

【讨论】：

非常感谢您的解释：D