Как реализовать вывод массива js в html
Вывести массив из js на страницу можно разными способами. Рассмотрим некоторые из них.
Пример №1 — У нас есть место на странице куда должны попасть данные.
class="basket"> class="fruit">
Вывести массив из js на страницу можно разными способами. Рассмотрим некоторые из них.
Пример №1 — У нас есть место на странице куда должны попасть данные.
class="basket"> class="fruit">Код ниже положит каждый фрукт в каждый div.
const store = ['Apple', 'Mango', 'Peach', 'Orange', 'Lemon'] document.querySelectorAll('.fruit').forEach((n, i) => n.textContent = store[i]) Пример №2 — Мы сами создаем структуру на странице в момент обхода массив элементов.
const fruitsAndVegetables = [ ['Apple', 'Mango', 'Peach', 'Orange', 'Lemon'], ['Beets', 'Peas', 'Carrots'] ] const fruitsToTable = (array) => const table = document.createElement('table'); // Добавим видимые границы у таблицы table.setAttribute('border', '1'); for (const row of array) const tr = table.insertRow(); for (const item of row) const td = tr.insertCell(); td.textContent = item > > return table; > document.body.append(fruitsToTable(fruitsAndVegetables)); Если мы находимся в текстовом редакторе, то нам нужно воспользоваться командой:
console.log(massiv)
Вместо слова massiv подставляем своё название массива.
Если мы уже находимся в консоли браузера, то нам нужно просто написать название нашего массива:
massiv
Вывести массив html кода на страницу
Здравствуйте в js переменную через php вывожу массив html кода, массив большой несколько страниц.
Не получается вывести элемент на html страницу
Как вывести элемент div1, во время изменения размера экрана? $(window).on(‘load.
Вывести текст из Doc на страницу HTML
Объясню суть: есть резюме некоего человека. Он может его загрузить на сервер при регистрации, в.
Как вывести данные из БД django на HTML страницу?
Нужно из БД django вытащить данные в виде таблицы. Способ нашёл только 1, но он не работает. На.
1786 / 1036 / 445
Регистрация: 12.05.2016
Сообщений: 2,550
1 2 3 4 5
const array = [2,4,5,1,11,4,1]; document.body.insertAdjacentHTML('beforeend', 'массив') array.forEach((item, idx) => document.body.insertAdjacentHTML('beforeend', `div>${idx}: ${item}div>`)) document.body.insertAdjacentHTML('beforeend', 'больше 5') array.filter(item=>item>5).forEach(item => document.body.insertAdjacentHTML('beforeend', `div>${item}div>`))
Регистрация: 16.10.2018
Сообщений: 59
Можно немного попроще?
Добавлено через 9 минут
Очень срочно
1786 / 1036 / 445
Регистрация: 12.05.2016
Сообщений: 2,550
Сообщение от Matr1 
Можно немного попроще?
Куда уж проще
1 2 3 4 5 6 7 8 9 10 11
var array = [2,4,5,1,11,4,1]; var arrayHtml = 'массив:'; var selectionHtml = 'больше 5'; for (var i=0; iarray.length; i++) { var element = array[i]; arrayHtml += '' + i + ':' + element + ''; if (element > 5) { selectionHtml += '' + i + ':' + element + ''; } } document.body.innerHTML = arrayHtml + selectionHtml;
Регистрация: 19.05.2019
Сообщений: 1
1 2 3 4 5 6
const array = [8,4,5,1,11,7,1,9,13]; for(var i in arr){ //перебирает все элементы массива if(arr[i] > 5){ //проверят число больше пяти console.log(i + ": " + arr[i]); //выводит в консоль в формате 1: 6 } }
6485 / 3896 / 2005
Регистрация: 14.06.2018
Сообщений: 6,781
Зуенко Михаил, привет.
1 2 3 4 5 6
let array = [8,4,5,1,11,7,1,9,13]; for(let i of arr){ // перебирает все элементы массива if(arr[i] > 5){ // проверять число больше пяти document.write(`${i}-${arr[i]}br />`); // просили вывести на страницу в формате 1-6 } }
Одна ошибка и одно моё пожелание.
— foreach в JavaScript пишется так: for(let item of array)
for in сейчас надо использовать только для перебора свойств в НЕмассиве (например, в Object)
— старайтесь не злоупотреблять const. Это ключевое слово не настолько крутое, как иногда кажется.
Обычно let хватает.
А function почти всегда выглядит более читаемым, чем «именованная» лямбда-функция.
Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, самодостаточный и воспроизводимый пример.
Закрыт 4 года назад .
Отслеживать
задан 7 июн 2019 в 20:34
59 1 1 серебряный знак 6 6 бронзовых знаков
пожалуйста перефразируйте и дополните свой вопрос
7 июн 2019 в 20:39
Сортировка: Сброс на вариант по умолчанию
let mass = ["1","2","3"]; let b = document.getElementById("body"); mass.forEach(e => b.innerHTML += "" + e + "
");Отслеживать
ответ дан 7 июн 2019 в 20:43
Vitaliy Stop_RU_war_in_UA Vitaliy Stop_RU_war_in_UA
3,857 12 12 серебряных знаков 27 27 бронзовых знаков
это не мой вариант jsfiddle.net/BaNru/0z72a91u/3 вот код который нужно вывести как так и подставив в них элементы массива
7 июн 2019 в 20:45
@jobananas по русски напишите что вам нужно. ничего ж не понятною. Пример я привел как делается вставка html в цикле. на ваш вопрос я ответил
7 июн 2019 в 20:49
korzinka.byethost9.com вот сайт нужно нажать на товар и там справа нужно вывести размеры под ценой пример как это выглядит сдесь garne.com.ua/p97075 я базу данных неиспользую вместо нее таблица гугл там размеры буду брать вот делаю вариант в html формате jsfiddle.net/BaNru/0z72a91u/3 мне нужно конкретно его вывести можете использовать в качестве примера мой вариант?
7 июн 2019 в 20:54
// Создаём глобальную переменную для сохранения в неё нашего значения, _согласно_ВОПРОСА_! var GlobalSize; var shoparray = ['s','l','x','xl','xxl']; document.addEventListener("DOMContentLoaded", function()< var spans = '', options = ''; // проходим по циклу. Этот код надо прогонять постоянно при загрузке товара! // Генерируем HTML shoparray.forEach( function(el,i) < spans += ''+el+''; options += ''; >) // Отрисовываем в документе document.querySelector('.product-sizes').insertAdjacentHTML ('afterbegin', spans); document.querySelector('#ProductSize').insertAdjacentHTML ('afterbegin', options); document.querySelector('#ProductSize').selectedIndex[0]; // Код ниже будет работать всегда и его перезапускать не надо! // Щелчок по элементам // Вешаем клик на родителя, чтобы не вешать обработчик на кадлый элемент отдельно document.querySelector('.product-sizes').addEventListener('click',function(e)< // теперь проверяем, что кликнули именно по необходимому элементу // (проверяем по классу), другие будут игнорироваться if(e.target.classList.contains('product-size'))< // запускаем необходимые действия // Удаляем староый seelect (через цикл для надёжности) document.querySelectorAll('.product-size.selected').forEach( function(element) < element.classList.remove('selected'); >); // Теперь выбираем текущий элемент e.target.classList.add('selected'); // Сохраняем в переменную согласно вопроса GlobalSize = e.target.dataset.productSize; // Меняем селект, ведь это надо, это подсказывает мой хрустальный шар требуется? document.querySelector('#ProductSize').value = e.target.dataset.productSize; > >) // Событие на изменение select document.querySelector('#ProductSize').addEventListener('change',function(e)< // Опять удаляем все старые выделения document.querySelectorAll('.product-size.selected').forEach( function(element) < element.classList.remove('selected'); >); // Добавляем новое выделение document.querySelector('[data-product-size="'+e.target.value+'"]').classList.add('selected'); // Пишем в глобальную значение GlobalSize = e.target.value; >) >); Отслеживать
ответ дан 7 июн 2019 в 21:07
user337101 user337101
да это оно остается только селект подсветить тем же цветом что и спан подсвечен (выбраный)
7 июн 2019 в 21:12
В CSS пропиши нужный цвет.
– user337101
7 июн 2019 в 21:13
где именно в каком месте?
7 июн 2019 в 21:27
– user337101
7 июн 2019 в 21:29
Вы это имеете в виду? Динамическое создание HTML ? Суть всё еще не понятна))
let sizes = ['s', 'l', 'x', 'xl', 'xxl'] let mama = document.querySelector('.product-sizes'); let select = document.createElement('select'); select.id = "ProductSize"; select.name = "size"; select.size = "1"; for(let i = 0; i < sizes.length; i++)< let span = document.createElement('span'); span.className = 'product-size'; span.setAttribute('data-product-size', sizes[i]); span.innerText = ( sizes[i] ).toUpperCase(); if( i === 0 ) < span.classList.add('selected'); >mama.appendChild( span ); let option = document.createElement('option'); option.value = sizes[i]; option.innerText = ( sizes[i] ).toUpperCase(); select.appendChild( option ); > mama.appendChild( select ); /* Дальше кусок вашего кода, не трогал */ /********************************************/ var GlobalSize; document.addEventListener("DOMContentLoaded", function()< document.querySelector('.product-sizes').addEventListener('click',function(e)< if(e.target.classList.contains('product-size'))< document.querySelectorAll('.product-size.selected').forEach( function(element) < element.classList.remove('selected'); >); e.target.classList.add('selected'); GlobalSize = e.target.dataset.productSize; document.querySelector('#ProductSize').value = e.target.dataset.productSize; > >) document.querySelector('#ProductSize').addEventListener('change',function(e)< document.querySelectorAll('.product-size.selected').forEach( function(element) < element.classList.remove('selected'); >); document.querySelector('[data-product-size="'+e.target.value+'"]').classList.add('selected'); GlobalSize = e.target.value; >) >);.product-details .product-sizes < border-bottom: 1px solid #bbb; text-align: center; padding-bottom: 13px; padding-top: 12px; margin-bottom: 13px; >.product-size.selected:hover < color: #fff; >.product-size.selected < border: 1px solid #fa6f57; background: #fa6f57; color: #fff; >.product-size:hover < border: 1px solid #fa6f57; color: #fa6f57; >.product-size