How to validate arangements(sequence) of <p> tag or text inside the div?
Question
I want to check the arrangements to validate if it is in the right position after drag and drop event
<div class="container" id="con">
<p class="draggable" draggable="true" id="p1">1</p>
<p class="draggable" draggable="true" id="p2">2</p>
<p class="draggable" draggable="true" id="p3">3</p>
<p class="draggable" draggable="true" id="p4">4</p>
</div>
2 answers
solution1
1 2021-05-05 17:38:33
This is now my answer to my question. Got it
function myFunction() {
var c = document.getElementById('con').children;
var txt = "";
var i;
for (i = 0; i < c.length; i++) {
txt = txt + c[i].lastChild.textContent ;
}
solution2
1 2021-05-05 17:39:58
Hope I get your meaning. To detect the position, you can first set an array of the correct/valid sequence. Then, you may set a listener to trigger the function of validating the position on each drag or validate on submit. For the function, you can loop throught the class, by getting the innerHTML of the class and comparing to the array you set earlier, you can identify if the sequence is correct or not.
validate_item1(); function validate_item1(){ let item1 = document.getElementsByClassName("item1"); let trueSequence = ["A","E","R","O","P","L","A","N","E"]; let result = true; for(let i=0;i<item1.length;i++){ if(item1[i].innerHTML;=trueSequence[i]){ result = false; } } if(result){ alert("Sequence is correct"); }else{ alert("Incorrect sequence"); } }
<html> <head></head> <body> <div class="container" id="con"> <p class="draggable item1" draggable="true">A</p> <p class="draggable item1" draggable="true">E</p> <p class="draggable item1" draggable="true">R</p> <p class="draggable item1" draggable="true">O</p> <p class="draggable item1" draggable="true">P</p> <p class="draggable item1" draggable="true">L</p> <p class="draggable item1" draggable="true">A</p> <p class="draggable item1" draggable="true">N</p> <p class="draggable item1" draggable="true">E</p> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.