если еще на node.textContent - PullRequest
Новая
       14

если еще на node.textContent

0 голосов
/ 28 апреля 2020

Я пытаюсь создать викторину перетаскивания в javascript, которая сможет проверить ответы после их отправки и дать отзыв о ответе. До сих пор я сделал раздел перетаскивания, но при попытке проверить ответы я сталкиваюсь с проблемами. Это мой код для веб-страницы: 

<!DOCTYPE html>
<html>
<head>
<title>Drag n Drop DEMO</title>
</head>

<body>
<h3>Quiz!</h3>
<p>Possible Answers</p>
<ol ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)">
 <li draggable="true" data-value="geolocation">Geolocation</li>
 <li draggable="true" data-value="canvas">Canvas</li>
 <li draggable="true" data-value="web-worker">Web Workers</li>
 <li draggable="true" data-value="appcache">AppCache</li>
 <li draggable="true" data-value="drag-and-drop">Drag and Drop</li>

</ol>

<script>
  var internalDNDType = 'text/x-example'; // set this to something specific to your site
  function dragStartHandler(event) {
    if (event.target instanceof HTMLLIElement) {
      // use the element's data-value="" attribute as the value to be moving:
      event.dataTransfer.setData(internalDNDType, event.target.dataset.value);
      event.dataTransfer.effectAllowed = 'move'; // only allow moves
    } else {
      event.preventDefault(); // don't allow selection to be dragged
    }
  }
   function dragEndHandler(event) {
    if (event.dataTransfer.dropEffect == 'move') {
      // remove the dragged element
      event.target.parentNode.removeChild(event.target);
    }
  }
</script>

<p>Provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, art, or other visual images on the fly.</p>
<ul id="answer1" ondragenter="dragEnterHandler(event)" ondragover="dragOverHandler(event)"
    ondrop="dropHandler(event)">
&nbsp;
</ul>

<p>Move (an image or highlighted text) to another part of the screen using a mouse or similar device.</p>
<ul id="answer2" ondragenter="dragEnterHandler(event)" ondragover="dragOverHandler(event)"
    ondrop="dropHandler(event)" style="margin-top: 0px;">
&nbsp;
</ul>

<p>Allows a developer to specify which files the browser should cache and make available to offline users.</p>
<ul id="answer3" ondragenter="dragEnterHandler(event)" ondragover="dragOverHandler(event)"
    ondrop="dropHandler(event)">
&nbsp;
</ul>

<p>Provides web applications with access to geographical location data about the user’s device.</p>
<ul id="answer4" ondragenter="dragEnterHandler(event)" ondragover="dragOverHandler(event)"
    ondrop="dropHandler(event)">
&nbsp;
</ul>

<p>Allows JavaScript to execute scripts in the background.</p>
<ul id="answer5" ondragenter="dragEnterHandler(event)" ondragover="dragOverHandler(event)"
    ondrop="dropHandler(event)">
&nbsp;
</ul>

<script>
  var internalDNDType = 'text/x-example'; // set this to something specific to your site
  function dragEnterHandler(event) {
    var items = event.dataTransfer.items;
    for (var i = 0; i < items.length; ++i) {
      var item = items[i];
      if (item.kind == 'string' && item.type == internalDNDType) {
        event.preventDefault();
        return;
      }
    }
  }
  function dragOverHandler(event) {
    event.dataTransfer.dropEffect = 'move';
    event.preventDefault();
  }
  function dropHandler(event) {
    var li = document.createElement('li');
    var data = event.dataTransfer.getData(internalDNDType);
    if (data == 'canvas') {
      li.textContent = 'Canvas';
    } else if (data == 'drag-and-drop') {
      li.textContent = 'Drag and Drop';
    } else if (data == 'appcache') {
      li.textContent = 'AppCache';
    } else if (data == 'geolocation') {
      li.textContent = 'Geolocation';
    } else if (data == 'web-worker') {
      li.textContent = 'Web Workers';
    }else {
      li.textContent = 'Unknown Answer';
    }
    event.target.appendChild(li);
  }
</script>

<h4>Check Answers Here!</h4>
<button type="button" onclick="checkAns()">Check Answers</button>&nbsp;&nbsp;<button onClick="window.location.reload();">Reset</button>
<br>
<div id="div1"></div>
<script>
function checkAns() {
    var node1 = document.getElementById('answer1')
    htmlContent = node1.innerHTML
    textContent = node1.textContent;

    var node2 = document.getElementById('answer2')
    htmlContent = node2.innerHTML
    textContent = node2.textContent;

    var node3 = document.getElementById('answer3')
    htmlContent = node3.innerHTML
    textContent = node3.textContent;

    var node4 = document.getElementById('answer4')
    htmlContent = node4.innerHTML
    textContent = node4.textContent;

    var node5 = document.getElementById('answer5')
    htmlContent = node5.innerHTML
    textContent = node5.textContent;


    var displayAnswer1 = document.createElement("p")   
    if (node1.textContent === 'Canvas') {
        var textNode1 = document.createTextNode("Question 1 was correct.");
        displayAnswer1.appendChild(textNode1);
        var bindElement1 = document.getElementById("div1");
        bindElement1.appendChild(displayAnswer1);
    } 
      else {
      var textNode1 = document.createTextNode("Question 1 was incorrect.");
      displayAnswer1.appendChild(textNode1);
      var bindElement1 = document.getElementById("div1");
      bindElement1.appendChild(displayAnswer1);
    }
}
</script>
</body>
</html>

Я могу получить textContent из секции перетаскивания, и даже когда я набираю alert(node1.textContent);, я получаю правильный ответ от перетаскивания. Но в моем if else утверждении всякий раз, когда я нажимаю кнопку, условие if никогда не выполняется. Состояние, в котором я сейчас нахожусь, это if (node1.textContent === 'Canvas'), к которому я обращаюсь, когда я воспринимал это как предупреждение вместо if if. Любая помощь приветствуется!

...