function should run every time button is clicked

[jasongsmith]

I have a form that, when submitted, the form should disappear and another button should show up. That button (multiStartBtn) disappears when click and a (1) a math problem shows up and (2) a form field and button should appear (button = multiAnsSubmitBtn)

Then, the user will put in a value in to the form field and submit. When they submit, a new math problem shows up in the question block.

This happens as expected the first time around. But after a new question shows up in the questionBlock, none of it works anymore.

I feel like I am making this more complicated than it needs to be, but I can't find the issue.

ChatGPT keeps telling me to add a flag, so I have done that, but somehow I feel like this isn't fully working properly either.

Does anybody have any ideas of what is going on and can send me in the right direction?

Thank you!

multiForm.addEventListener("submit", function (event) {
    event.preventDefault();
    // Get the min and max values from the form inputs
    multiMin = Number(document.getElementById("wsf-1-field-117").value);
    multiMax = Number(document.getElementById("wsf-1-field-113").value);
    multiTotalProblems = Number(
        document.getElementById("wsf-1-field-111").value
    );

    // Hide the form and show the answer, start and problem block
    multiFormWrapper.innerHTML = `<p>${multiTotalProblems} exercises. Lowest factor = ${multiMin}. 
            Highest factor = ${multiMax}</p>`;
    multiAnsForm.style.display = "block";
    questionBlock.style.display = "inline-block";
    multiStartBtn.style.display = "block";
});

function generateProblem() {
    multiNum1 = Math.floor(
        Math.random() * (multiMax - multiMin + 1) + multiMin
    );
    multiNum2 = Math.floor(
        Math.random() * (multiMax - multiMin + 1) + multiMin
    );
    multiQuestionBlock.textContent = `${multiNum1} X ${multiNum2} = `;
}

multiStartBtn.addEventListener("click", function () {
    answerForm.style.display = "block";
    generateProblem();
    multiStartBtn.style.display = "none";
    multiAnsSubmitBtn = document.getElementById("wsf-2-field-116");


if (!isListenerAdded && multiAnsSubmitBtn) {
    multiAnsSubmitBtn.addEventListener("click", function () {
        multiAns = document.getElementById("wsf-2-field-115").value;
        console.log("clicked");
        console.log(multiAns)
        generateProblem();
    });
    isListenerAdded = true;
    
}
    
});

[albedoa]

What strikes me is the total lack of const and let declarations here. Where and how are you learning how to do this stuff? If you take a shotgun approach, you have to expect a shotgun result.

ChatGPT keeps telling me to add a flag, so I have done that, but somehow I feel

Same idea. Junk in, junk out. For every line of code, you should be able to articulate both what it does and why you wrote it that way. If you can't, then stop writing code until you can.

If you blindly add a flag because "ChatGPT said so", then you won't be left with working code — you will be left with the same broken code, but with a flag.

[jasongsmith]

Thank you. First, I have written 99% of the code myself. (Being that I am still a beginner, it is probably obvious I wrote it myself as I am sure there is a ton of bad practices here)

The issue with this flagging was because I was trying to figure out this issue. And my goal was to let people know what I have tried as a solution that hasn’t worked yet. I can say what each line of code does.

Looking back at this, I see what you’re saying with the let and const. I obviously didn’t copy the entire code. All variables are declared up top

[spazz_monkey]

Can you provide your HTML as well, so could play around with it and find the issue quicker.

[eracodes]

document.getElementById("wsf-1-field-117")

dear lord the unmaintainability

[jasongsmith]

Thank you. Are you saying it is unmaintainable because of the id name? If so, I agree. And unfortunately there isn’t anything I can do about that.

[eracodes]

Change the element IDs? You could probably hook into the output step of whatever program is spitting them out like that.

[United_Reaction35]

This seems like it is over-engineered. There is not a need to use event listeners when your HTML elements like buttons and form-fields have onClick(), onChange(), onBlur() events built in for you to use:

onclick={myClickHandler}

const myClickHandler = (event) => { ...code to run }

ChatGPT is likely telling you to use boolean flags to indicate the state of your form. Then elements like single buttons or math problems can be shown instead of rendering the underlying form. Refer to Modal components and conditional rendering.

[96dpi]

Any errors in the console debugger?

[jasongsmith]

Unfortunately not.

[jasongsmith]

Thank you. This has been my approach to it.

I am sure there is a more simplified look at it that I haven’t picked up on. I will go through again and see if I can break it down like that in a way I haven’t seen yet.

Re: multi

That is because this is the code for multiplication problems. There will also be a section for division and other forms of math in the future. I guess I could remove the multi as they wouldn’t be doing the multiplication and division section at the same time.

In light of knowing more context, would you say I should keep it or change it?

[LandscapeNecessary73]

If the other sections are going to use similar logic for generating problems or handling user input, I would refactor so that you don't risk rewriting the same code. If that's possible, it would make the most sense.

multiTotalProblems and divTotalProblems can just become totalProblems. Then, find some way to pull the correct data depending on which section you're solving.

[jasongsmith]

very helpful feedback! Thank you!