js. как создать <img> определенное количество раз автоматически?
Всем привет, Не могу решить проблему
как присвоить к значению такое же количество картинок. Те если значение 5 на странице то 5 картинок если 6 то 6 картинок Число изменяеться как в + так и в - Пытался через document.write но выдает только 1 картинку Помогите пжл |
abrahamm,
создание-элемента |
рони,
а как присвоить переменную к узлу? Что бы не 1 раз создавалось а сколько потребуется. Вот добавил for, в консоль выводиться определенное кол во раз, а если пишу appendChild выводиться 1 раз. |
Цитата:
|
Вложений: 1
рони,
<script type="text/javascript">
var img = document.createElement('img'),
quantity = parseInt(document.getElementById('quantity').innerHTML);
img.className = 'img';
plusFive.onclick = function() {
quantity = quantity + 5;
for (var i = 0; i < quantity; i++) {
document.getElementById('section').appendChild(img);
}
document.getElementById('quantity').innerHTML = quantity;
}
minusFive.onclick = function() {
quantity = quantity - 5;
document.getElementById('quantity').innerHTML = quantity;
}
</script>
|
abrahamm,
куда картинки, в какой элемент выводить? |
рони,
Не важно куда и не обязательно картинки, можно и div. Просто хочу увидеть пример как это реализуется. Спасибо огромное за внимание!
<head>
<title>test</title>
</head>
<body>
<section id="section">
<p id="quantity">0</p>
<button id="plusFive">+5</button>
<button id="minusFive">-5</button>
</section>
<script type="text/javascript">
var img = document.createElement('img'),
quantity = parseInt(document.getElementById('quantity').innerHTML);
img.className = 'img';
plusFive.onclick = function() {
quantity = quantity + 5;
for (var i = 0; i < quantity; i++) {
document.getElementById('section').appendChild(img);
}
document.getElementById('quantity').innerHTML = quantity;
}
minusFive.onclick = function() {
quantity = quantity - 5;
document.getElementById('quantity').innerHTML = quantity;
}
</script>
</body>
|
abrahamm,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var section = document.querySelector("#section"),
stars = document.querySelector("#stars"),
quantity = document.querySelector("#quantity"),
num = 0,
img = document.createElement("img"),
temp;
img.src = "https://data12.proshkolu.ru/content/media/pic/icon/7000000/6228000/6227205-30ffa0df.jpg";
img.className = "img";
section.addEventListener("click", function(event) {
var id = event.target.id;
if (id == "plusFive") {
num += 5;
}
if (id == "minusFive") {
num -= 5;
}
if (num < 0) {
num = 0;
}
quantity.innerHTML = num;
stars.innerHTML = "";
temp = document.createDocumentFragment();
for (var i = 0; i < num; i++) {
temp.appendChild(img.cloneNode());
}
stars.appendChild(temp);
});
});
</script>
</head>
<body>
<div id="stars"></div>
<section id="section">
<p id="quantity">0</p>
<button id="plusFive">+5</button>
<button id="minusFive">-5</button>
</section>
</body>
</html>
|
рони,
Ого!!! Спасибо за потраченное время! Сейчас просмотрю и изучу! |
| Часовой пояс GMT +3, время: 03:46. |