Javascript function calling trouble with newly created element. Help?

[reaganl]

EDIT: I just browsed around more and used quiz2input1.onclick=newF1 for it. it works!!

 

Hi. I have a huge project due tonight and this is the last thing tripping me up. I know it's excessively messy and i could simplify it, but I don't have the time

Anyways, the webpage responds to the initial call by pressing a button (id="buttonStart"). It then correctly displays the "Are you 18 or Older" next to the buttons "Yes" and "No". The problem is when I click on the buttons- nothing happens even though I added ".addEventListener()". 

First is the HTML that is being manipulated, next is the script I have inserted into the section element above it.

This is a 101-level course so there is much I cannot incorporate. Any help is appreciated!! Google has been thoroughly exhausted.

I've tried most variables in multiple different locations, either in or out of the code. Didn't make a difference.

<article id="p2quiz2"><h3 id="answerTo">Can You Have Ice Cream?</h3>
                    <div><p id="quizDialog">Click the Button to Start the Quiz!</p>
                    </div>
                    <input type="button" id="buttonStart" value="Click to Start" onclick="leavePlease();doiNeedThis1();doiNeedThis2();"><br><br></article>

<script>
                    var buttonRemove= document.getElementById("buttonStart");
                    var quiz2input1=document.createElement("INPUT");
                    var quiz2input2=document.createElement("INPUT");
                    var txt1=document.createTextNode("Yes");
                    var txt2=document.createTextNode("No");
                    function leavePlease(){
                        buttonRemove.remove();
                        document.getElementById("quizDialog").innerHTML="Are You 18 or Older?";}
                    function doiNeedThis1(){
                        quiz2input1.appendChild(txt1);
                        quiz2input1.setAttribute("type","button");
                        quiz2input1.setAttribute("value","Yes");
                        quiz2input1.setAttribute("id","yesA");
                        var dialogIDvar=document.getElementById("quizDialog");
                        dialogIDvar.appendChild(quiz2input1);
                        }
                    function doiNeedThis2(){
                        quiz2input2.appendChild(txt2);
                        quiz2input2.setAttribute("type","button");
                        quiz2input2.setAttribute("value","No");
                        quiz2input2.setAttribute("id","noA");
                        var dialogIDvar=document.getElementById("quizDialog");
                        dialogIDvar.appendChild(quiz2input2);
                    }
                    document.getElementById("noA").addEventListener("click",newF2);
                    document.getElementById("yesA").addEventListener("click",newF1);
                    function newF1(){
                        var moreRemove1= document.getElementById("yesA");
                        var moreRemove2= document.getElementById("noA");
                        moreRemove1.remove();
                        moreRemove2.remove();
                        document.getElementById("answerTo").innerHTML="You Can!";
                    }
                    function newF2(){
                        var moreRemove1= document.getElementById("yesA");
                        var moreRemove2= document.getElementById("noA");
                        var todayDate=new Date();
                        moreRemove1.remove();
                        moreRemove2.remove();
                        if(todayDate.getDay() == 6 || todayDate.getDay() === 0){
                            document.getElementById("answerTo").innerHTML="You Can! It is the weekend.";    
                        }
                        else{
                            document.getElementById("answerTo").innerHTML="You Cannot. It is not the weekend.";
                        }
                    }
                </script>

another function i have trouble with is this but it's MUCH less urgent. It does not respond at all. Yes it is asking if the user loves my dog. I'm exhausted.

<article id="p2quiz1">
                    <h3 id="doyouLike">Do You Like Nicky?</h3>
                    <p><img src="nickycsce.PNG" width="510" height="370" alt="Nicky2"></p>
                    <form>
                        <input type="radio" id="NickyYes" name="Opinion" value="Yes">
                        <label for="NickyYes">Yes</label><br>
                        <input type="radio" id="NickyAbs" name="Opinion" value="Absolutely">
                        <label for="NickyAbs">Absolutely</label><br>
                        <input type="button" value="Finished" onclick="goodChoice()">
                        <script>
                            var yesS= document.getElementById("NickyYes");
                            var absS= document.getElementById("NickyAbs");
                        function goodChoice(){
                            if(yesS.checked= true;){
                                document.getElementById("dpyouLike").innerHTML="You could have been more Enthusiastic"
                                };
                            else if (absS.checked = true){
                                document.getElementById("doyouLike").innerHTML="Good Choice."
                            };
                            else{
                                document.getElementById("doyouLike").innerHTML="wtf";
                            }
                        }
                    </script>
                    </form>
                </article>

 

[WereCatf]

38 minutes ago, reaganl said:

document.getElementById("noA").addEventListener("click",newF2);

document.getElementById("yesA").addEventListener("click",newF1);

You are trying to find elements by their Id before they have been given an Id! You are using doiNeedThis1() and doiNeedThis2() to assign id's to them, but those functions are called only when you click on buttonStart, so obviously it's not going to work.

 

You could just use quiz2input1 and quiz2input2 directly, since they were just defined, ie.

quiz2input2.addEventListener("click", newF2);