第二个存在条件不起作用

Posted

技术标签:

【中文标题】第二个存在条件不起作用【英文标题】：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，你就会得到答案。 【参考方案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来附加一些包含文本的元素（如&lt;div&gt;），或者向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

以上是关于第二个存在条件不起作用的主要内容，如果未能解决你的问题，请参考以下文章

React Native 条件渲染不起作用

为啥第二个（兄弟）React Context Provider 不起作用？或者，如果上面有同级 Context Provider，为啥 React Context Provider 不起作用

React Native 第二个 ScrollView 不起作用

我的第一个代码不起作用，第二个代码不起作用，但它们几乎相同。如何找到黑色缩略图的原因？

表单中的第二个输入框第二次不起作用

为啥当我选择第二个输入框时音译不起作用？