Javascript 检查条件是否为真，如果为真，继续下一级，如果不抛出警报消息_Javascript_Html

Javascript 检查条件是否为真，如果为真，继续下一级，如果不抛出警报消息

javascript html

Javascript 检查条件是否为真，如果为真，继续下一级，如果不抛出警报消息,javascript,html,Javascript,Html,所以现在我有两个可拖动的图像和两个Div框。您可以将图像拖动到Div框中，并根据您放入特定Div中的图像，该Div的边框颜色将发生变化（绿色或红色）我接下来要做的是有一个按钮，让我们说“下一步”，当你点击这个按钮时，它会带你到另一个页面，但只有当两个DIV框都有绿色边框时，如果不满足这个条件，那么就会弹出一个警报。听起来很奇怪，我知道，但我非常感谢您的帮助：）我的代码如下： HTML: JS: 根据你写的，可能是这样的 HTML: 我假设你做了checkImages（），在这里分配css类

所以现在我有两个可拖动的图像和两个Div框。您可以将图像拖动到Div框中，并根据您放入特定Div中的图像，该Div的边框颜色将发生变化（绿色或红色）

我接下来要做的是有一个按钮，让我们说“下一步”，当你点击这个按钮时，它会带你到另一个页面，但只有当两个DIV框都有绿色边框时，如果不满足这个条件，那么就会弹出一个警报。听起来很奇怪，我知道，但我非常感谢您的帮助：）

我的代码如下：

HTML:

JS:

根据你写的，可能是这样的

HTML:

我假设你做了

checkImages（）

，在这里分配css类

<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body>
<div id="Drop1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="Drop2" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<img src="trash.jpg" ondrop="drop(event)"     ondragover="allowDrop(event)" id="trash" draggable="false"/>

<img id="drag1" class="item1" src="forward.png" draggable="true" ondragstart="drag(event)" width="64" height="64">
<img id="drag2" class="item2" src="left.jpg" draggable="true" ondragstart="drag(event)" width="64" height="64">

<button onclick="checkImages()">Validate images</button>

#Drop1 {width:70px;height:70px;padding:10px;border:1px solid#aaaaaa;}
#Drop2 {width:70px;height:70px;padding:10px;border:1px solid#aaaaaa;}

#Drop1.red-border,
#Drop2.red-border {
  border: 1px solid red;
}

#Drop1.green-border,
#Drop2.green-border {
  border: 1px solid green;
}

#Drop1.gray-border,
#Drop2.gray-border {
  border: 1px solid darkgray;
}

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
 ev.dataTransfer.setData("text/html", ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text/html");

    var clone = document.getElementById(data).cloneNode(true);
    clone.id = clone.id + (new Date()).getMilliseconds();
    ev.target.appendChild(clone);

    if (ev.target == document.getElementById("trash")) {
        var img = document.getElementById(data);
        img.parentNode.removeChild(img); 
    }
}

function checkImages() {
  var drop1Elem = document.getElementById('Drop1'),
      drop2Elem = document.getElementById('Drop2');

  if(drop1Elem.childNodes.length >= 1) {
    if(drop1Elem.childNodes[0].className === 'item1') {
      drop1Elem.className = 'red-border';
    } else if(drop1Elem.childNodes[0].className === 'item2') {
      drop1Elem.className = 'green-border';
    } else {
      drop1Elem.className = 'gray-border';
    }
  }

  if(drop2Elem.childNodes.length >= 1) {
    if(drop2Elem.childNodes[0].className === 'item1') {
      drop2Elem.className = 'red-border';
    } else if(drop2Elem.childNodes[0].className === 'item2') {
      drop2Elem.className = 'green-border';
    } else {
      drop2Elem.className = 'gray-border';
    } 
  }
}

<button onclick="greenCheck()">Next</button>

function greenCheck() {
    var drop1Elem = document.getElementById('Drop1'),
    drop2Elem = document.getElementById('Drop2');

    if (drop2Elem.className == 'green-border' && drop1Elem.className == 'green-border') {
    // Next page
    } else {
    // Tell user both of them are not green
}