0

Нужно чтобы у кнопок умеющих одинаковый id/class был фон. Фон находятся в папке "images". К примеру:

 var value = $('#id').val();
   var l = document.createElement('img');
    l.src = 'images/'+ value +'.png';
     document.getElementById ("#id").appendChild (l);
#id{
height:50px;
width:50px;
}
    <button id="id" value="car"></button>
    <button id="id" value="bus"></button>





<!-- begin snippet: js hide: false console: true babel: false -->

P.S. в js не силен( не бейте

1 ответ 1

1

var value = $('#id').val();

document.querySelectorAll('[id="id"]').forEach(el => {
  var l = document.createElement('img');
  l.src = 'https://greenbelarus.info/files/e097aa3018e45a2cce59e61c4f67b8ec.jpg';
  el.appendChild(l);
});
[id="id"] {
  height: 150px;
  width: 150px;
}

img {
  height: 120px;
  width: 120px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="id" value="car"></button>
<button id="id" value="bus"></button>

Стоит запомнить, что если на странице много одинаковых элементов, сходные по концепции, то стоит использовать классы, а не идентификаторы.

var value = $('#id').val();

document.querySelectorAll('.btn').forEach(el => {
  var l = document.createElement('img');
  l.src = 'https://greenbelarus.info/files/e097aa3018e45a2cce59e61c4f67b8ec.jpg';
  el.appendChild(l);
});
.btn {
  height: 150px;
  width: 150px;
}

img {
  height: 120px;
  width: 120px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button value="car" class="btn"></button>
<button value="bus" class="btn"></button>

3
  • Благодарю!!! Спасибо за совет
    – amir2799
    Commented 10 июн. 2021 в 18:59
  • Можете подсказать что сделать ,чтобы были разные изображения?
    – amir2799
    Commented 10 июн. 2021 в 19:06
  • 1
    @amir2799 в цикле написать l.src = 'images/'+ el.value +'.png'; вместо текущей строки Commented 10 июн. 2021 в 19:10

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.