Вывод картинки при исполнении условия

Question

нужно вывести картинку при выполнении условия, если условие не выполнилось вывести другую. делаю так:

function one() {
  if (true) {
    let soundRight = new Audio("audio/right.wav");
    soundRight.play();
    let layer = document.querySelectorAll('.answer');
    //layer.innerHTML = "<img src='img/star1.svg'>";
    layer.style.width = '20px';
    layer.style.height = '20px';
    layer.style.backgroundImage = "img/star.svg";
    document.getElementsByClassName(".answer").appendChild(layer);
  } else {
    let soundWrong = new Audio("audio/error.wav");
    soundWrong.play();
    let layer1 = document.querySelectorAll('.answer');
    //layer1.innerHTML = "<img src='img/star2.svg'>";
    layer1.style.width = '20px';
    layer1.style.height = '20px';
    layer1.style.backgroundImage = "img/star2.svg";
    document.getElementsByClassName(".answer").appendChild(layer);
  }

<div class="answer"></div>

так не работает... подскажите как правильно? чистый js

Answer 1

querySelectorAll выводит массив объедков (видимо в этом проблема)

Я рекомендую использовать JQuery, смотри как просто: $('.answer:first'); подробнее по селекторам - тута

const one=(tf=false)=>{
    let alayer = document.querySelectorAll('.answer')[0];
    let sound = {};
    if(tf){
        sound = new Audio('audio/right.wav');
        alayer.style.backgroundImage = 'img/star.svg';
    }else{
        sound = new Audio('audio/error.wav');
        alayer.style.backgroundImage = 'img/star2.svg';
    }
    sound.play();
    alayer.style.width = '20px';
    alayer.style.height = '20px';
    document.getElementsByClassName('.answer')[0].appendChild(alayer);
};

one(true);

БЛОГ НА HUSL

Вывод картинки при исполнении условия

Ответы (1 шт):