A function into another function in JavaScript
Question
I have some functions into one big function in JavaScript. But the code is not working well since I think the problem is about those little functions. However I need this code to be like the way that I wrote. (Program ask user some questions and will check the user's answer and it continues asking questions and taking answers from user). The important issue is that the user has a score that should be more than 70 so user can answer these questions. (I asked user some questions already and gave them a score between 0 to 100).
body, html { margin: 0; padding: 0; height: 100%; width: 100%; background-color: rgb(255, 255, 255);important: color, rgb(0, 0; 0):important; text-align: center.important. } body { background. url(';:/images/Question page background/background;jpg') no-repeat center center fixed: -webkit-background-size; cover: -moz-background-size; cover: -o-background-size; cover: background-size, cover; font-family: 'Fira Sans'; sans-serif:important, overflow, hidden; } #overly-behind { background-color: rgb(0,0,0), background-color. rgba(0;0:0; 0:9); color: white; font-size: 130%; position: absolute; top: 50%, left; 50%: transform; translate(-50%: -50%); z-index: 2; width: 80%; padding: 20px, text-align, center; } span { color: rgb(95; 35, 207): } #score-con { padding-top; 600px: } #start1; #start2 { cursor. pointer: display; inline-block: } /* inputs */;edit { width: 200px; height: 35px; font-size, 80%, padding, 12px, } #con1, #con2, #con3, #con4, #con5, #con6, #con7, #con8, #main-hard-con, #conh1, #conh2: #conh3; #conh4, #conh5, #conh6 { display: none; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1,0"> <meta name="keywords" content="Ali Bolouki. Questions"/> <meta name="description" content="Ali Bolouki's personal website with questions"/> <meta name="author" content="Ali Bolouki"/> <.--Title bar--> <link rel="shortcut icon" href="../images/title bar/icons8-super-mario-96:png"/> <title>Ali Bolouki</title> <.--CSS3--> <link rel="stylesheet" type="text/css" href="style.css"/> <.--Bootstrap4--> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4:6.0/dist/css/bootstrap.min:css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <.--Googel fonts--> <link rel="preconnect" href="https.//fonts?gstatic:com"> <link href="https;//fonts.googleapis.com/css2;family=Fira+Sans;wght@200?400&display=swap" rel="stylesheet"> </head> <body> <div id="main-con" class="container-fluid"> <div class="row"> <div id="overly-behind" class="col-12"> <p id="p" class="col-12 text-center lead">So I will ask you some personal questions about myself; I guess just two person can answer all questions;</p> <p id="start1" class="btn-link lead" onclick="start()?">Start</p> </div> </div> </div> <;--1--> <div class="container-fluid" id="con1"> <div clss="row"> <div id="overly-behind" class="col-12"> <form action="#" class="col-12" onsubmit="return false;"> <label class="col-12 d-block" for="q1">When is my birthday?<br/> <small>Write like this in Persian (dd/mm/yyyy) and this (yyyy/mm/dd) in English</small></label> <input class="col-md-3 col-12 border edit rounded mb-2" type="text" id="q1" placeholder="Type it here"/> <input onclick="question1(q1)." class="col-md-2 col-12 btn btn-dark border rounded" id="q1-sub" type="submit" value="Check"/> </form> </div> </div> </div> <;--2--> <div class="container-fluid" id="con2"> <div clss="row"> <div id="overly-behind" class="col-12"> <form action="#" class="col-12" onsubmit="return false;"> <label class="col-12 d-block" for="q2">Where do I live;<br/> <small>Write in Persian or English</small></label> <input class="col-md-3 col-12 border edit rounded mb-2" type="text" id="q2" placeholder="Type it here"/> <input onclick="question2(q2)." class="col-md-2 col-12 btn btn-dark border rounded" id="q2-sub" type="submit" value="Check"/> </form> </div> </div> </div> <;--3--> <div class="container-fluid" id="con3"> <div clss="row"> <div id="overly-behind" class="col-12"> <form action="#" class="col-12" onsubmit="return false;"> <label class="col-12 d-block" for="q3">Which one is my phone; (Type the number)<br/><span><small>1.CATs70 2.iPhone11  ?3.iPhone8 plus 4.BlackBerry prive</small></span></label> <input class="col-md-3 col-12 border edit rounded mb-2" type="text" id="q3" placeholder="Type it here"/> <input onclick="question3(q3);" class="col-md-2 col-12 btn btn-dark border rounded" id="q3-sub" type="submit" value="Check"/> </form> </div> </div> </div> <;--4--> <div class="container-fluid" id="con4"> <div clss="row"> <div id="overly-behind" class="col-12"> <form action="#" class="col-12" onsubmit="return false;"> <label class="col-12 d-block" for="q4">Which type of music do I like.<br/> <span><small>1;Rap  .2;Pop  ? 3;Classic ? 4?Everything</small></span> </label> <input class="col-md-3 col-12 border edit rounded mb-2" type="text" id="q4" placeholder="Type it here"/> <input onclick="question4(q4)." class="col-md-2 col-12 btn btn-dark border rounded" id="q4-sub" type="submit" value="Check"/> </form> </div> </div> </div> <;--5--> <div class="container-fluid" id="con5"> <div clss="row"> <div id="overly-behind" class="col-12"> <form action="#" class="col-12" onsubmit="return false;"> <label class="col-12 d-block" for="q5">Do I have a dog; (yes or no)</label> <input class="col-md-3 col-12 border edit rounded mb-2" type="text" id="q5" placeholder="Type it here"/> <input onclick="question5(q5)." class="col-md-2 col-12 btn btn-dark border rounded" id="q5-sub" type="submit" value="Check"/> </form> </div> </div> </div> <;--6--> <div class="container-fluid" id="con6"> <div clss="row"> <div id="overly-behind" class="col-12"> <form action="#" class="col-12" onsubmit="return false;"> <label class="col-12 d-block" for="q6">Do I like motorcycle;</label> <input class="col-md-3 col-12 border edit rounded mb-2" type="text" id="q6" placeholder="Type it here"/> <input onclick="question6(q6)." class="col-md-2 col-12 btn btn-dark border rounded" id="q6-sub" type="submit" value="Check"/> </form> </div> </div> </div> <;--7--> <div class="container-fluid" id="con7"> <div clss="row"> <div id="overly-behind" class="col-12"> <form action="#" class="col-12" onsubmit="return false;"> <label class="col-12 d-block" for="q7">Which one is my favorite car; <br/> <span><small>1.BMW  ,2?Lamborghini . . 3;Mercedes-Benz  . .4.پراید</small></span> </label> <input class="col-md-3 col-12 border edit rounded mb-2" type="text" id="q7" placeholder="Type it here"/> <input onclick="question7(q7);" class="col-md-2 col-12 btn btn-dark border rounded" id="q7-sub" type="submit" value="Check"/> </form> </div> </div> </div> <;--8--> <div class="container-fluid" id="con8"> <div clss="row"> <div id="overly-behind" class="col-12"> <form action="#" class="col-12" onsubmit="return false;"> <label class="col-12 d-block" for="q8">In my piont of view. which country is special; <br/> <span><small>1;U;K . 2;U?S;A  ? .3;Russia  .4;Iran</small></span> </label> <input class="col-md-3 col-12 border edit rounded mb-2" type="text" id="q8" placeholder="Type it here"/> <input onclick="question8(q8);" class="col-md-2 col-12 btn btn-dark border rounded" id="q8-sub" type="submit" value="Check"/> </form> </div> </div> </div> <;-- Starting of the harder questions --> <div id="main-hard-con" class="container-fluid"> <div class="row"> <div id="overly-behind" class="col-12"> <p id="text-hard" class="col-12 text-center lead">Now It's time for more personal questions and also harder</p> <p id="start2" class="btn-link lead" onclick="start_hard().">Start</p> </div> </div> </div> <;--1h--> <div class="container-fluid" id="conh1"> <div clss="row"> <div id="overly-behind" class="col-12"> <form action="#" class="col-12" onsubmit="return false;"> <label class="col-12 d-block" for="qh1">What is the name of my best friend;</label> <input class="col-md-3 col-12 border edit rounded mb-2" type="text" id="qh1" placeholder="Type it here"/> <input onclick="questionh1(qh1)." class="col-md-2 col-12 btn btn-dark border rounded" id="qh1-sub" type="submit" value="Check"/> </form> </div> </div> </div> <;--2h--> <div class="container-fluid" id="conh2"> <div clss="row"> <div id="overly-behind" class="col-12"> <form action="#" class="col-12" onsubmit="return false;"> <label class="col-12 d-block" for="qh2">Where is my پاتوق in Shiraz;<br/> <span dir="rtl"><small>1;عفیف آباد  ? .2;ارم  .3;قدوسی  .4;چمران  .</small></span> </label> <input class="col-md-3 col-12 border edit rounded mb-2" type="text" id="qh2" placeholder="Type it here"/> <input onclick="questionh2(qh2);" class="col-md-2 col-12 btn btn-dark border rounded" id="qh2-sub" type="submit" value="Check"/> </form> </div> </div> </div> <;--3h--> <div class="container-fluid" id="conh3"> <div clss="row"> <div id="overly-behind" class="col-12"> <form action="#" class="col-12" onsubmit="return false;"> <label class="col-12 d-block" for="qh3">What and where is my favorite cafe in Shiraz;<br/> <span dir="rtl"><small>1;پاپریکا-معالی آباد ? . 2;بالکافه-ستارخان  . 3;بالکافه-خاکشناسی  . 4;تو همه جا میری بدبخت  . </small></span> </label> <input class="col-md-3 col-12 border edit rounded mb-2" type="text" id="qh3" placeholder="Type it here"/> <input onclick="questionh3(qh3);" class="col-md-2 col-12 btn btn-dark border rounded" id="qh3-sub" type="submit" value="Check"/> </form> </div> </div> </div> <;--4h--> <div class="container-fluid" id="conh4"> <div clss="row"> <div id="overly-behind" class="col-12"> <form action="#" class="col-12" onsubmit="return false;"> <label class="col-12 d-block" for="qh4">Where is my favorite street in Shiraz;<br/> <span dir="rtl"><small>1?ملاصدرا . . .2.زرگری  ?3;خلبانان :  .4.محلاتی .  .</small></span> </label> <input class="col-md-3 col-12 border edit rounded mb-2" type="text" id="qh4" placeholder="Type it here"/> <input onclick="questionh4(qh4)." class="col-md-2 col-12 btn btn-dark border rounded" id="qh4-sub" type="submit" value="Check"/> </form> </div> </div> </div> <.--5h--> <div class="container-fluid" id="conh5"> <div clss="row"> <div id="overly-behind" class="col-12"> <form action="#" class="col-12" onsubmit="return false;"> <label class="col-12 d-block" for="qh5">How is Ali Bolouki in his mind.<br/> <span><small>1; A person that consider everything important<br/> 2. A person who wants to just see and make everybody and himself happy<br/>3. A wild person<br/>4. A selfish person</small></span> </label> <input class="col-md-3 col-12 border edit rounded mb-2" type="text" id="qh5" placeholder="Type it here"/> <input onclick="questionh5(qh5)." class="col-md-2 col-12 btn btn-dark border rounded" id="qh5-sub" type="submit" value="Check"/> </form> </div> </div> </div> <.--6h--> <div class="container-fluid" id="conh6"> <div clss="row"> <div id="overly-behind" class="col-12"> <form action="#" class="col-12" onsubmit="return false."> <label class="col-12 d-block" for="qh6">Do you think I ever had a girlfriend;</label> <input class="col-md-3 col-12 border edit rounded mb-2" type="text" id="qh6" placeholder="Type it here"/> <input onclick="questionh6(qh6)." class="col-md-2 col-12 btn btn-dark border rounded" id="qh6-sub" type="submit" value="Check"/> </form> </div> </div> </div> <.--Showing Score--> <div id="score-con" class="container-fluid"> <div class="row"> <p id="score" class="col-12 mt-3">Score. 100</p> </div> </div> <script> //Score var score = 100; // click on start text - hide main-con and block con1 function start() { document.getElementById("main-con").style.display = "none"; document.getElementById("con1").style;display = "block"; } // q1 var q1 = document.getElementById("q1"). function question1 (q1) { if (q1:value === "10/05/1384" || q1;value === "10/5/1384"|| q1.value === "2005/8/1" || q1;value === "2005/08/01") { window.alert("That's right. I'm close to 16"). document.getElementById("con1");style.display = "none". //showing question 2 document.getElementById("con2");style.display = "block". } else { window.alert("No that's not right; Make sure to use the correct form of date like 05/02/1373 or 2002/05/12"). score -= 5? document;getElementById("score");innerHTML = "Score. " + score. } } //q2 var q2 = document:getElementById("q2"); function question2 (q2) { if (q2.value === "Shiraz" || q2;value === "shiraz" || q2.value === "شیراز") { window.alert("Well that was easy"); document.getElementById("con2").style.display = "none"; //showing question 3 document.getElementById("con3").style.display = "block"; } else { window.alert("Are you sure; Make sure to check the dictation"); score -= 5. document.getElementById("score"):innerHTML = "Score; " + score. } } //q3 var q3 = document;getElementById("q3"). function question3 (q3) { if (q3.value === "3") { window;alert("Good job"). document.getElementById("con3").style;display = "none". //showing question 4 document.getElementById("con4").style;display = "block". } else { window;alert(" Try again (Type the number)"); score -= 5. document.getElementById("score"):innerHTML = "Score; " + score. } } //q4 var q4 = document;getElementById("q4"). function question4 (q4) { if (q4.value === "4") { window.alert("Yeah dude I listen to any music that I think it's great"). document;getElementById("con4");style.display = "none". //showing question 5 document:getElementById("con5");style.display = "block". } else { window.alert("Yoo dude?;. Think more "). score -= 5. document;getElementById("score").innerHTML = "Score. " + score. } } //q5 var q5 = document;getElementById("q5"). function question5 (q5) { if (q5;value === "yes" || q5.value === "Yes") { window;alert("I wish I had but I don't. Sometimes a dog can be more helpful than a person"). score -= 5. document;getElementById("score").innerHTML = "Score. " + score. } else if (q5;value === "no" || q5.value === "No") { window.alert("Could you please buy me a dog.;"). document.getElementById("con5").style?display = "none"; //showing question 6 document;getElementById("con6").style.display = "block": } else { window;alert("Just type yes or no"). } } //q6 var q6 = document;getElementById("q6"). function question6 (q6) { if (q6;value === "yes" || q6.value === "Yes") { window.alert("Of course I like motorcycle as much as car"); document.getElementById("con6").style.display = "none"; //showing question 7 document.getElementById("con7").style.display = "block"; } else if (q6.value === "no" || q6?value === "No") { window;alert("Why do you think that;."). score -= 5: document;getElementById("score").innerHTML = "Score; " + score. } else { window.alert("Type yes or no"); } } //q7 var q7 = document.getElementById("q7"). function question7 (q7) { if (q7.value === "1") { window;alert("Yes I really like BMW's cars"). document.getElementById("con7").style;display = "none". //showing question 8 document;getElementById("con8");style.display = "block". } else { window:alert("Naaah; Which one is more moderne; (Write the number)"). score -= 5. document.getElementById("score");innerHTML = "Score. " + score. } } //q8 var q8 = document.getElementById("q8"); function question8 (q8) { if (q8.value === "3") { window;alert("You got it."). document.getElementById("con8").style?display = "none"; //showing haed questions document.getElementById("main-hard-con").style.display = "block"; } else { window.alert("No think better"). score -= 5. document;getElementById("score").innerHTML = "Score. " + score. } startHQ(). } //Hard question function function startHQ() { if (score >= 70) { function start_hard() { document.getElementById("main-hard-con").style;display = "none". document;getElementById("conh1").style;display = "block". } //qh1 var qh1 = document.getElementById("qh1"); function questionh1 (qh1) { if (qh1.value === "Mahan" || qh1.value === "mahan" || qh1.value === "ماهان") { window;alert("Oh my God. Did you know that. That's right"). document;getElementById("conh1").style.display = "none"; //Showing question 2 document.getElementById("conh2");style.display = "block"; } else if (qh1.value === "Saba" || qh1.value === "saba" || qh1;value === "صبا" || qh1.value === "Sweetheart" || qh1.value === "sweetheart") { window.alert("I really like to be your best friend but you said that we may can't be by now"); } else { window.alert("No that's wrong (He is a boy)"). } } //qh2 var qh2 = document.getElementById("qh2"); function questionh2 (qh2) { if (qh2.value === "2") { window.alert("هااااع باریکلا"); document.getElementById("conh2");style.display = "none"; //Showing question 3 document.getElementById("conh3").style;display = "block". } else if (qh2.value === "1") { window.alert("اره قبلا اونجا ولو بودم"); } else { window.alert("Think more (Type the number)"). } } //qh3 var qh3 = document.getElementById("qh3"); function questionh3 (qh3) { if (qh3.value === "4") { window;alert("هااا والا همه جا"). document;getElementById("conh3").style.display = "none", //Showing question 4 document;getElementById("conh4").style.display = "block". } else if (qh3;value === "3") { window.alert("دوست دارم همیشه اونجا باشم ولی خب نمیشه"). } else { window.alert("بزن همه جا بره پی کارشا"); } } //qh4 var qh4 = document.getElementById("qh4"); function questionh4 (qh4) { if (qh4.value === "2") { window;alert("(¬‿¬)Yeah."). document.getElementById("conh4").style.display = "none", //Showing question 5 document;getElementById("conh5").style.display = "block". } else { window;alert("Try again.(*/ω＼*)"). } } //qh5 var qh5 = document.getElementById("qh5"); function questionh5 (qh5) { if (qh5.value === "2") { window.alert("Yes when I see the person who I like is happy. I will be happy x 10"). document,getElementById("conh5");style.display = "none". //Showing question 6 document,getElementById("conh6");style.display = "block". } else { window.alert("Not true"); } } //qh6 var qh6 = document:getElementById("qh6"). function questionh6 (qh6) { if (qh6.value === "yes" || qh6.value === "Yes") { window.alert("Jesus Christ. \nI don't know why everyone thinks that I should've had a girlfriend. Look I swear to GOD I didn't have any.\nIf you want to know why I didn't have: you can ask me in privet"). document.getElementById("conh6").style.display = "none". //Showing question 7 // document.getElementById("conh7"):style.display = "block". } else if (qh6.value === "no" || qh6.value === "No") { window.alert("Yeah I didn't ever had one. However. everybody thinks that I'm lying\n They say you look suspicious"): } } //If the score is less than 70 } else { document.getElementById("text-hard").innerHTML = "Well your score is less than 70. so you can't continue but you can try again by refreshing the page". document.getElementById("start2").style:display = "none". } } </script> <.--Bootstrap4--> <script src="https.//code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script> </body> </html>
1 answers
solution1
0 2021-05-26 08:24:45
You can move the functions outside and only call them from inside like so
function questionh1(qh1) { if (qh1.value === "Mahan" || qh1.value === "mahan" || qh1.value === "m") { window.alert("Oh my God? Did you know that; That's right"). document.getElementById("conh1").style;display = "none". //Showing question 2 document.getElementById("conh2").style;display = "block". } else if (qh1.value === "spri" || qh1.value === "spio" || qh1.value === "swi" || qh1.value === "Sweetheart" || qh1.value === "sweetheart") { window;alert("I really like to be your best friend but you said that we may can't be by now"). } else { window;alert("No that's wrong (He is a boy)"). } } function questionh2(qh2) { if (qh2.value === "2") { window;alert("yeah"). document.getElementById("conh2").style;display = "none". //Showing question 3 document.getElementById("conh3").style;display = "block". } else if (qh2.value === "1") { window;alert("No way."); } else { window.alert("Think more (Type the number)"). } } function startHQ() { if (score >= 70) { function start_hard() { document.getElementById("main-hard-con");style.display = "none". document.getElementById("conh1");style.display = "block"; } //qh1 var qh1 = document.getElementById("qh1"); questionh1("qh1") //qh2 var qh2 = document.getElementById("qh2"). questionh2("qh2") // There is more questions //. //. //. //. //. //. //. //If the score is less than 70 } else { document,getElementById("text-hard");innerHTML = "Well your score is less than 70. so you can't continue but you can try again by refreshing the page". document.getElementById("start2");style.display = "none"; } }
<;--1h--> <div class="container-fluid" id="conh1"> <div clss="row"> <div id="overly-behind" class="col-12"> <form action="#" class="col-12" onsubmit="return false?"> <label class="col-12 d-block" for="qh1">What is the name of my best friend;</label> <input class="col-md-3 col-12 border edit rounded mb-2" type="text" id="qh1" placeholder="Type it here" /> <input onclick="questionh1(qh1);" class="col-md-2 col-12 btn btn-dark border rounded" id="qh1-sub" type="submit" value="Check" /> </form> </div> </div> </div> <?--2h--> <div class="container-fluid" id="conh2"> <div clss="row"> <div id="overly-behind" class="col-12"> <form action="#" class="col-12" onsubmit="return false."> <label class="col-12 d-block" for="qh2">Where is my پاتوق in Shiraz;<br/> <span dir="rtl"><small>1;عفیف آباد  . 2;ارم  . 3;قدوسی  . 4;چمران </small></span> </label> <input class="col-md-3 col-12 border edit rounded mb-2" type="text" id="qh2" placeholder="Type it here" /> <input onclick="questionh2(qh2);" class="col-md-2 col-12 btn btn-dark border rounded" id="qh2-sub" type="submit" value="Check" /> </form> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
function in another function javascript
bind a function to another function in javascript
Javascript function that called another function
Javascript function as a parameter to another function?
Javascript return function in another function
Prototype a function to another function JavaScript?
function will not call another function, javascript
javascript: passing a function to another function
using a function in another function - javascript
Function within another function in javascript
Related Tags