#javascript #html #arrays #dom
#javascript #HTML #массивы #dom
Вопрос:
Пытаясь поменять местами абзацы в любом случайном порядке нажатием кнопки с помощью javascript, попытался поместить абзацы в массив и создать функцию подкачки.. Пожалуйста, дайте мне знать, если я что-то упустил (мой первый пост в истории!)
<html>
<head>
<title>Swap Paragraphs At Random</title>
<script>
window.onload = function () {
var x = document.getElementById('p1').innerHTML;
var y = document.getElementById('p2').innerHTML;
var z = document.getElementById('p3').innerHTML;
var lists = [x,y,z];
var swapped = false;
document.getElementById('trigger').onclick = function swap() {
if (swapped == false) {
document.getElementById('p1').innerHTML = Math.floor(Math.random() * lists.length);
document.getElementById('p2').innerHTML = Math.floor(Math.random() * lists.length);
swapped = true;
return swapped;
} else {
document.getElementById('p1').innerHTML = "" x;
document.getElementById('p2').innerHTML = "" y;
swapped = false;
return swapped;
}
}
}
</script>
</head>
<body>
<div id="p1">Loren sump dolor sit mate, sumo unique argument um no. </div><br>
<div id="p2"> Id mes mover elect ram assertion has no. </div><br>
<div id="p3">Ea augur diam usu, nosier arum est an. </div><br>
<button id="trigger" onlick="swap()">Click</button>
</body>
</html>
Комментарии:
1. что не работает? Вам нужно объяснить, где что-то не так, чтобы мы могли помочь
2. есть ли там проблема?
3. Для начала вы просто присваиваете «поменявшимся местами» абзацам случайное число, которое вы сгенерировали, чтобы они стали числом вместо вашего текста. Вы также даже ничего не делаете с 3-м абзацем.
4. Привязка (связывание события с функцией) выполняется неправильно. Я имею в виду, что излишне добавлять атрибут onclick к элементу html, когда вы уже привязываете событие в скрипте. Это, скорее всего, приведет к тому, что функция будет запускаться дважды при каждом нажатии. но не в этом случае, потому что вы также неправильно ввели onclick (onlick)
5. Кроме того, выражение ‘ «» x’ такое же, как просто ‘ x’
Ответ №1:
Получите все ваши элементы с помощью querySelectorAll и преобразуйте их в массив элементов с помощью Array#from .
Для извлечения и удаления элемента из списка используйте Array#splice
-
Только когда пользователь нажимает, вы действительно получаете абзацы и помещаете их в список.
-
Затем для каждого элемента вы присваиваете ему случайный абзац, а затем удаляете этот абзац из списка.
window.onload = function() {
const elements = Array.from(document.querySelectorAll('.container > div'));
document.getElementById('trigger').onclick = function swap() {
const list = elements.map(ele=>ele.innerHTML);
elements.forEach(ele=>{
const index = Math.floor(Math.random() * list.length);
ele.innerHTML = list.splice(index, 1)
});
}
} <div class="container">
<div>Loren sump dolor sit mate, sumo unique argument um no. </div>
<div> Id mes mover elect ram assertion has no. </div>
<div>Ea augur diam usu, nosier arum est an. </div>
</div>
<button id="trigger" onlick="swap()">Click</button> Комментарии:
1. @MaheerAli да, это нормально. Sometiems Math.random возвращает тот же индекс, что и для текущего местоположения абзаца.
2. Я знаю это, но, я думаю, это должно быть исправлено
Ответ №2:
Ну, если я правильно понял, все, что вам нужно, это swap значение этих div символов. Ваш код в полном порядке, вы пропустили только 1 одну вещь, обратите внимание:-
вы делаете Math.floor(Math.random() * lists.length) вместо lists[Math.floor(Math.random() * lists.length)] в if (swapped == false) { разделе
document.getElementById('p1').innerHTML = lists[Math.floor(Math.random() * lists.length)];
document.getElementById('p2').innerHTML = lists[Math.floor(Math.random() * lists.length)];
<html>
<head>
<title>Swap Paragraphs At Random</title>
<script>
window.onload = function () {
var x = document.getElementById('p1').innerHTML;
var y = document.getElementById('p2').innerHTML;
var z = document.getElementById('p3').innerHTML;
var lists = [x,y,z];
var swapped = false;
document.getElementById('trigger').onclick = function swap() {
if (swapped == false) {
document.getElementById('p1').innerHTML = lists[Math.floor(Math.random() * lists.length)];
document.getElementById('p2').innerHTML = lists[Math.floor(Math.random() * lists.length)];
swapped = true;
return swapped;
} else {
document.getElementById('p1').innerHTML = "" x;
document.getElementById('p2').innerHTML = "" y;
swapped = false;
return swapped;
}
}
}
</script>
</head>
<body>
<div id="p1">Loren sump dolor sit mate, sumo unique argument um no. </div><br>
<div id="p2"> Id mes mover elect ram assertion has no. </div><br>
<div id="p3">Ea augur diam usu, nosier arum est an. </div><br>
<button id="trigger">Click</button>
</body>
</html>