Prosty niedziałający kod

pytanie zadane 14 listopada 2020 w JavaScript przez Nabuchadonozor Gaduła (3,120 p.)
zamknięte 14 listopada 2020 przez Nabuchadonozor

Witam serdecznie forumowiczów!

Otóż dostałem zajawkę ostatnimi czasy na JS, po tym, jak nauczyciel nam projekt zadał i pomyślałem, że coś w nim wykminie, wydał mi się bardzo "prosty" :) I kolejny projekt mam na głowie teraz i znów chcę z niego skorzystać, jednakże wystąpił jakiś problem w kodzie, którego znaleźć nie potrafię... tyle czasu już zmarnowałem, a pewnie to jakaś pestka dla kogoś bynajmniej troszkę bardziej doświadczonego. Będę bardzo wdzięczny za chęć niesienia pomocy.

Błąd polega na tym, że jak klikam w btn1 to nic się nie dzieje, a powinny zmienić się innerHTML's dla h1, btn1, btn2, btn3 i btn4. Wcześniej działało, ale coś zrobiłem i nie trybi... Błagam Was...

<!DOCTYPE html>

<html>

<head>
    <title>QUIZ</title>
    <meta charset="utf-8">
    <meta name="description" content="Przejdź quiz do końca, a odkryjesz jak wielki drzemie w Tobie potencjał...">
    <meta name="keywords" content="quiz, sukces, człowiek, pytania">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body onload="quizLogic()">
    <div id="topbar">QUIZ | Czy odniesiesz sukces?
    </div>
    <div id="container">
        <div id="contentQuestion">
            <h1 id="h1Index"></h1>
        </div>
        <div id="wrapper">
            <div class="wrapperButton">
                <button id="answer1" class="answerButton" onclick="onclickButtonA()"></button>
            </div>
            <div class="wrapperButton">
                <button id="answer2" class="answerButton" onclick="onclickButtonB()"></button>
            </div>
            <div class="wrapperButton">
                <button id="answer3" class="answerButton" onclick="onclickButtonC()"></button>
            </div>
            <div class="wrapperButton">
                <button id="answer4" class="answerButton" onclick="onclickButtonD()"></button>
            </div>

        </div>
    </div>

    <script>
        var nrQuestion = 1;
        var points = 0;

        var question = "";
        var answerUser;
        var anA = 3;
        var anB = 2;
        var anC = 1;
        var anD = 0;

        function quizLogic() {
            questionsAnswers(nrQuestion);
        }

        function questionsAnswers(nrQuestion) {
            if (nrQuestion = 1) {
                document.getElementById("h1Index").innerHTML = 'Jak często czytasz książki? <span id="spanIndex">?</span>';
                document.getElementById("answer1").innerHTML = 'MIESIĘCZNIE 1 / WIĘCEJ';
                document.getElementById("answer2").innerHTML = 'OD 5 DO 12 ROCZNIE';
                document.getElementById("answer3").innerHTML = 'OD 2 DO 5 ROCZNIE';
                document.getElementById("answer4").innerHTML = 'PONIŻEJ 2 ROCZNIE';
            } else if(nrQuestion = 2){
                document.getElementById("h1Index").innerHTML = 'AAAAA <span id="spanIndex">?</span>';
                document.getElementById("answer1").innerHTML = 'a';
                document.getElementById("answer2").innerHTML = 'b';
                document.getElementById("answer3").innerHTML = 'c';
                document.getElementById("answer4").innerHTML = 'd';
            }
        }

        function onclickButtonA() {
            nrQuestion = 2;
            quizLogic();
        }

        function onclickButtonB() {

        }

        function onclickButtonC() {

        }

        function onclickButtonD() {

        }

    </script>
</body>

</html>

komentarz zamknięcia: Tak jak mówiłem, głupi błąd... znak porównania w JS to == a nie samo =. Miłego!

komentarz 15 listopada 2020 przez VBService Ekspert (253,340 p.)
edycja 15 listopada 2020 przez VBService

Zmieniłbym na początek ten kawałek kodu

        function questionsAnswers(nrQuestion) {
            if (nrQuestion = 1) {
                document.getElementById("h1Index").innerHTML = 'Jak często czytasz książki? <span id="spanIndex">?</span>';
                document.getElementById("answer1").innerHTML = 'MIESIĘCZNIE 1 / WIĘCEJ';
                document.getElementById("answer2").innerHTML = 'OD 5 DO 12 ROCZNIE';
                document.getElementById("answer3").innerHTML = 'OD 2 DO 5 ROCZNIE';
                document.getElementById("answer4").innerHTML = 'PONIŻEJ 2 ROCZNIE';
            } else if(nrQuestion = 2){
                document.getElementById("h1Index").innerHTML = 'AAAAA <span id="spanIndex">?</span>';
                document.getElementById("answer1").innerHTML = 'a';
                document.getElementById("answer2").innerHTML = 'b';
                document.getElementById("answer3").innerHTML = 'c';
                document.getElementById("answer4").innerHTML = 'd';
            }
        }

        function questionsAnswers(nrQuestion) {
          let h1Index_, answer1_, answer2_, answer3_, answer4_;
          
          switch(nrQuestion) {               
             case 1:
               h1Index_ = 'Jak często czytasz książki';
               answer1_ = 'MIESIĘCZNIE 1 / WIĘCEJ';
               answer2_ = 'OD 5 DO 12 ROCZNIE';
               answer3_ = 'OD 2 DO 5 ROCZNIE';
               answer4_ = 'PONIŻEJ 2 ROCZNIE';
               break;
             case 2:
               h1Index_ = 'AAAAA';
               answer1_ = 'a';
               answer2_ = 'b';
               answer3_ = 'c';
               answer4_ = 'd';
               break;
           } 

          document.getElementById("h1Index").innerHTML = h1Index_ + ' ?';
          document.getElementById("answer1").innerHTML = answer1_;
          document.getElementById("answer2").innerHTML = answer2_;
          document.getElementById("answer3").innerHTML = answer3_;
          document.getElementById("answer4").innerHTML = answer4_;
        }

bo jak przybędzie tobie pytań w quizie to sporo bloków if () elseif () ... z powtarzającym się kodem będzie do "wklepania" , a może tablica ...

var nrQuestion = 1;
var points = 0;
 
var question = "";
var answerUser;
var anA = 3;
var anB = 2;
var anC = 1;
var anD = 0;

const questionsAnswers_ = [
    ['Jak często czytasz książki',
     'MIESIĘCZNIE 1 / WIĘCEJ',
     'OD 5 DO 12 ROCZNIE',
     'OD 2 DO 5 ROCZNIE',
     'PONIŻEJ 2 ROCZNIE'],
    ['AAAAA', 'a', 'b', 'c', 'd'],
    ['CCCC', 'a', 'b', 'c', 'd']
];

. . .

function questionsAnswers(nrQuestion) {
  nrQuestion = (nrQuestion < 1) ? 0 : nrQuestion - 1;

  document.getElementById("h1Index").innerHTML = questionsAnswers_[nrQuestion][0] + ' ?';
  document.getElementById("answer1").innerHTML = questionsAnswers_[nrQuestion][1];
  document.getElementById("answer2").innerHTML = questionsAnswers_[nrQuestion][2];
  document.getElementById("answer3").innerHTML = questionsAnswers_[nrQuestion][3];
  document.getElementById("answer4").innerHTML = questionsAnswers_[nrQuestion][4];
}

komentarz 16 listopada 2020 przez Nabuchadonozor Gaduła (3,120 p.)

Dzięki wielkie za propozycje! Osobiście zaczynałem z C++ i teraz przeszedłem na tworzenie stron, przez to bardzo dobrze to rozumiem. Jednakże składnia tablic jest jeszcze mało estetyczna/zrozumiała w tym JS. Ale pomysł ze switch'em na 101% wykorzystam. Jeszcze raz wielkie dzięki! :)

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci