• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Pewnie prosty błąd...

Aruba Cloud - Virtual Private Server VPS
+1 głos
275 wizyt
pytanie zadane 27 stycznia 2021 w JavaScript przez Nabuchadonozor Gaduła (3,120 p.)
zamknięte 28 stycznia 2021 przez Nabuchadonozor

Witam serdecznie,

napotkałem się z pewnym problemem, otóż zacząłem praktykować książkę "JavaScript i jQuery" Daivd'a Sawyer'a McFarland. Z jQuery jeszcze nie miało na moim aktualnym rozdziale miejsca, aczkolwiek w pewnym rozdziale zadano napisanie quizu. Nie mogę rozwiązać pewnego kłopotu.

Otóż to jest plik index.html:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>  

    <title>Document</title>
</head>

<body onload="ask()">
    <header>
        QUIZ
    </header>

    <main>
        <div id="questions">
            PYTANIE
        </div>
        <div class="answers">
            <button class="btnSubmit" id="ansA" onclick="nextQuestion(); validation()">ODPOWIEDŹ</button>
        </div>
        </div>
        <div class="answers">
            <button class="btnSubmit" id="ansB" onclick="nextQuestion(); validation()">ODPOWIEDŹ</button>
        </div>

    </main>

    <script>
        document.getElementById('ansA').innerHTML = 'xD';
    </script>
   
</body>
</html>

A to script.js:

var end = false;

const questions = [
        'Co oznacza typ INT?',
        'Jak deklarujemy HTML5?',
        'Który typ oznacza łancuchy znaków?'
]


var answersA = [
        'Liczby całkowite',
        '<html5>...</html5>',
        'string'
    ]

var answersB = [
        'Liczby zmiennoprzecinkowe',
        '<!DOCTYPE html>',
        'char'
    ]

var variableNextQuestion = false;

function nextQuestion(){
    variableNextQuestion = true;
}

function ask(){

    while(end!=true){
        for(var i=0; i<3; i++){
            document.getElementById('questions').innerHTML = questions[i];
            document.getElementById('ansA').innerHTML = answersA[i];
            document.getElementById('ansB').innerHTML = answersB[i];

            while(!nextQuestion()){
                variableNextQuestion = false;
            }
        }
    }
}

function validation();

Miałby ktoś może pomysł, dlaczego funkcja ask() nie działa? InnerHTML nie podmienia słowa "ODPOWIEDŹ" na to co powinno...

komentarz zamknięcia: Rozwiązałem, poniżej dałem odpowiedź ;)
1
komentarz 27 stycznia 2021 przez ScriptyChris Mędrzec (190,190 p.)

function validation();

Jeśli to faktyczny kod, to powinien rzucać SyntaxError'em.

Przy okazji, spójrz w konsolę przeglądarki (klawisz F12), tam pojawią się ewentualne błędy, które powinny pomóc w namierzeniu przyczyny problemu.

2 odpowiedzi

0 głosów
odpowiedź 27 stycznia 2021 przez rafal.budzis Szeryf (85,460 p.)

Przeglądarki działają trochę inaczej niż program w C++ ;) Tutaj masz jeden główny wątek i dopóki JS nie skończy swojej pracy przeglądarka nie odświeży obrazu. te pętle while są do wywalenia ;) 

Spróbuj tak

 

var currentQuestion = 0;


function ask(){

     document.getElementById('questions').innerHTML = questions[currentQuestion];
     document.getElementById('ansA').innerHTML = answersA[currentQuestion];
     document.getElementById('ansB').innerHTML = answersB[currentQuestion];

     currentQuestion+=1;
}

Gdy wywołasz drugi raz funkcje ask to podmienia ci się pytanie na następne

komentarz 27 stycznia 2021 przez Nabuchadonozor Gaduła (3,120 p.)

Jeśli chodzi o to (podmiana tylko w pliku script.js):

var end = false;

const questions = [
        'Co oznacza typ INT?',
        'Jak deklarujemy HTML5?',
        'Który typ oznacza łancuchy znaków?'
]


var answersA = [
        'Liczby całkowite',
        '<html5>...</html5>',
        'string'
    ]

var answersB = [
        'Liczby zmiennoprzecinkowe',
        '<!DOCTYPE html>',
        'char'
    ]

var variableNextQuestion = false;

function nextQuestion(){
    variableNextQuestion = true;
}

var currentQuestion = 0;
 
 
function ask(){
 
     document.getElementById('questions').innerHTML = questions[currentQuestion];
     document.getElementById('ansA').innerHTML = answersA[currentQuestion];
     document.getElementById('ansB').innerHTML = answersB[currentQuestion];
 
     currentQuestion+=1;
}


function validation();

to nic nie zmieniło, cały czas na stronie pisze "odpowiedź zamiast bieżącego pytania :|

Dzięki za odpowiedź ;)

komentarz 28 stycznia 2021 przez rafal.budzis Szeryf (85,460 p.)
Widocznie problem jest w innym miejscu. Wyślij cały kod JS.
0 głosów
odpowiedź 28 stycznia 2021 przez Nabuchadonozor Gaduła (3,120 p.)

Nie wiem dlaczego, ale wina była w definicji onlick'a oraz funkcji, do ktorej on przekierowywal:


<button class="btnSubmit" id="ansA" onclick="nextQuestion();">ODPOWIEDŹ</button>

usunąłem pogrubiony fragment onclick="nextQuestion(); validation();" i działa jak natura chciała :D Ale dziękuję za chęci!

Podobne pytania

0 głosów
2 odpowiedzi 426 wizyt
pytanie zadane 12 września 2020 w Systemy CMS przez nowyklemens Początkujący (430 p.)
0 głosów
2 odpowiedzi 176 wizyt
pytanie zadane 14 listopada 2020 w JavaScript przez Nabuchadonozor Gaduła (3,120 p.)
0 głosów
0 odpowiedzi 141 wizyt
pytanie zadane 14 listopada 2020 w JavaScript przez Nabuchadonozor Gaduła (3,120 p.)

93,334 zapytań

142,328 odpowiedzi

322,406 komentarzy

62,670 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...