Проверка внутренностей DIV на наличие IMG с ID

148
23 ноября 2018, 14:20

<!DOCTYPE HTML> 
<html> 
 
<head> 
  <style> 
    #div1, 
    #div2 { 
      min-width: 200px; 
      height: 50px; 
      margin: 10px; 
      padding: 10px; 
      border: 1px solid black; 
    } 
 
    img.imgelem1 { 
      width: 50px; 
    } 
 
    img.imgelem2 { 
      width: 100px; 
    } 
 
    td { 
      text-align: center; 
    } 
  </style> 
</head> 
 
<body> 
  <table> 
    <tr> 
      <td class="imgtd"> 
        <div class="imgcontainer"> 
          <img src="https://png.icons8.com/color/50/000000/1.png" draggable="true" ondragstart="drag(event)" id="drag1"> 
          <img src="https://png.icons8.com/color/50/000000/2.png" draggable="true" ondragstart="drag(event)" id="drag2"> 
          <img src="https://png.icons8.com/color/50/000000/3.png" draggable="true" ondragstart="drag(event)" id="drag3"> 
          <img src="https://png.icons8.com/color/50/000000/4.png" draggable="true" ondragstart="drag(event)" id="drag4"> 
        </div> 
      </td> 
    </tr> 
    <tr> 
      <td> 
        <img class="imgelem1" src="img/1.png"> 
      </td> 
      <td> 
        <img class="imgelem2" src="img/2.png"> 
      </td> 
    </tr> 
    <tr> 
      <td> 
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
      </td> 
      <td> 
        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
      </td> 
    </tr> 
  </table> 
  <script> 
  function allowDrop(ev) { 
      ev.preventDefault(); 
  } 
 
  function drag(ev) { 
      ev.dataTransfer.setData("text", ev.target.id); 
  } 
 
  function drop(ev) { 
      ev.preventDefault(); 
      var data = ev.dataTransfer.getData("text"); 
      ev.target.appendChild(document.getElementById(data)); 
  } 
  </script> 
</body> 
 
</html>

Проверить при нажатии кнопки на наличие определенной img в div'е Например: 1 и 3 в 1 колонке, 2 и 4 в 2 колонке. В Google не смог найти.

Answer 1

Для проверки есть ли элемент внутри можно использовать contains.

const parent = document.querySelector('#myDiv') 
const child = document.querySelector('#myImg') 
 
const result = parent.contains(child) 
 
console.log(result)
<div id="myDiv"> 
  <img id="myImg"> 
</div>

READ ALSO
Как сделать элемент над контентом, но чтобы не перехватывал события клика
javascript

Как сделать элемент над контентом, но чтобы не перехватывал события клика

Необходимо на всю страницу поставить эффект волны (такой как на Материалайзе)

 156
Логика крестиков ноликов в js
javascript

Логика крестиков ноликов в js

Подскажите пожалуйстаНужно добавить окно alert при исходе игры "ничья"

 166
применение this в javascript [дубликат]
javascript

применение this в javascript [дубликат]

На данный вопрос уже ответили:

 134
Что такое стеки и очереди?
javascript

Что такое стеки и очереди?

Расскажите, пожалуйста, о стекахКак пишется программа?

 175