Я делаю викторину, используя JavaScript.

Я сохранил пункт назначения вопроса и ответа во вложенном массиве.

В таком формате

var questions = [
    ["QUESTION",
    "CHOICE_1", "CHOICE_2","CHOICE_3",
    "DEST_1", "DEST_2", "DEST_3"]
]

Когда я получу название вопроса, я буду использовать как questions[n][0] и как пункт назначения первого выбора questions[0][4]

Но в некоторых случаях он возвращается как Cannot read property 'x'. Я хочу знать, в чем причина этого и как это исправить. Спасибо

        $('.quiz').hide();
        $('.result').hide();

        var questions = [

          //1
          ["Click either button",
            "Yes", "No", "",
            "2", "2", ""],

          //2
          ["You will have an error when clicking the third button",
            "FIRST", "SECOND", "THIRD",
            "3", "3", ""],

          //3
          ["If it works it should show you this page",
            "END OF ERROR DEMONSTRATION", "CLICK THIS WILL ALSO CRASH", "",
            "", "", ""],
        ];

        function start() {
          $('.start').hide('400');
          $('.quiz').show();
          getQuestion(1);
        }

        function getQuestion(n) {
          var n = n - 1;
          var d1 = questions[n][4];
          var d2 = questions[n][5];
          var d3 = questions[n][6];
          
          $('#d_txt').html(questions[n][0]);
          $('#c1').html(questions[n][1]);
          $('#c2').html(questions[n][2]);
          
          //Hide choice 3 if not exist
          if (questions[n][3] == "") {
            $('#c3').hide();
          } else {
            $('#c3').show();
            $('#c3').html(questions[n][3]);
          }
          $("#c1").click(function () { getQuestion(d1) });
          $("#c2").click(function () { getQuestion(d2) });
          $("#c3").click(function () { getQuestion(d3) });
        }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<body style="background-color: #E9ECEF">
	<div class="jumbotron start">
		<h1 class="display-5">Simple JS Quiz</h1>
		<p class="lead">Click start amd I will guide you through how this is error</p>
		<hr class="my-4">
		<a class="btn btn-success btn-lg btn-block" href="#" role="button" onClick="start()">Start!</a>
	</div>

	<div class="jumbotron quiz">
		<h1 class="display-5">Question</h1>
		<p class="lead"><span id="d_txt">DETAIL_TEXT</span></p>
		<hr class="my-4">
		<a class="btn btn-secondary btn-lg btn-block" id="c1" href="#" role="button">CHOICE_1_TEXT</a>
		<a class="btn btn-secondary btn-lg btn-block" id="c2" href="#" role="button">CHOICE_2_TEXT</a>
		<a class="btn btn-secondary btn-lg btn-block" id="c3" href="#" role="button">CHOICE_3_TEXT</a>
	</div>
</body>
-2
phwt 22 Май 2018 в 19:44

1 ответ

Лучший ответ

Принимая во внимание предоставленный фрагмент, всякий раз, когда действие клика выполняется на любом из THIRD, END OF ERROR DEMONSTRATION, CLICK THIS WILL ALSO CRASH - соответственно, целевое значение (скажем, d) устанавливается на "" и вызывается getQuestion(d). После этого getQuestion оценивается следующим образом:

var n = n - 1;                // evals to var n = "" - 1 => undefined
var d1 = questions[n][4];     // evals to var d1 = questions[undefined][4]

Это приводит к ошибке: Cannot read property '4' of undefined

Надеюсь, это поможет. Кроме того, как уже упоминалось в других комментариях, для таких сценариев рекомендуется использовать объектно-ориентированный подход, а не вложенные массивы.

1
Tejas Shah 22 Май 2018 в 17:08