JavaScript Not Running/Displaying

Code Help HTML/CSS/JS
1

@Firepup650 I will say, the JavaScript doesn’t seem to be carrying out its functions and doing anything. I’m not getting errors, and have checked with AI but it couldn’t fix it.

2

Weird, sounds like a Replit issue TBH.
Also, I wouldn’t rely on AI.

Also also, why are you using snake_case?

Also also also, why are you using both let and var?
Here’s a tip: Whenever you’re making a variable with document.getElementById, use const because that variable will likely never change.
For everything else, use let.

Also, .onclick isn’t recommended.

const btn = document.getElementById("submit");

btn.addEventListener('click', event => {
  event.preventDefault()
  ...
});
3

@QwertyQwerty88 I added some print statements to see if it was just a display issue, but nothing appears in the console either.

import data from './question_sets.json';

const question_sets = data;

let answer;

function set_question() {
    
    let random = Math.floor(Math.random() * question_sets.planetary_set.length);
    let question = question_sets.planetary_set[random].question;
    answer = question_sets.planetary_set[random].answer;
    let icon = question_sets.planetary_set[random].icon;
    let type = question_sets.planetary_set[random].type;

    document.getElementById("icon").setAttribute("name", icon);
    document.getElementById("icon").setAttribute("type", type);
    document.getElementById("question").innerHTML = question;

    console.log(question);
    console.log(answer);
    
}

set_question();

let modal = document.getElementById("question-modal");

let modal_text = document.getElementById("modal-text");

document.querySelector('.q-a-wrapper').addEventListener('submit', function(event) {
    event.preventDefault();

    let answer_input = document.getElementById("answer-input");
    let answer_value = answer_input.value.toLowerCase();

    if (answer_value) { 
        modal.style.opacity = "1";
        if (answer_value === answer.toLowerCase()) {
            modal_text.innerHTML = "Correct";
            modal_text.style.color = "var(--back)";
            modal.style.background = "var(--primary)";
        } else {
            modal_text.innerHTML = "Incorrect";
            modal_text.style.color = "var(--fore)";
            modal.style.background = "var(--back)";
        }
        answer_input.value = '';

        modal.classList.add("active");

        setTimeout(function() {
            modal.style.opacity = "0";
            setTimeout(function() {
                modal.classList.remove("active");
            }, 300);
        }, 2000);

        set_question();
    }
});
1 Like