Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Javascript function calling trouble with newly created element. Help?

Go to solution Solved by 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>

 

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>

 

Link to post
Share on other sites
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);

 

Hand, n. A singular instrument worn at the end of the human arm and commonly thrust into somebody’s pocket.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×