Question

我似乎无法通过网页上的javascript选项访问数组中的索引3。我无法看到最后一个问题＆＃34;您对自己的选择满意吗？＆＃34;

不确定我在这里丢失或做错了什么。

页面位于： http://ec2-18-217-166-22.us-east-2.compute.amazonaws.com/JSRefresher1.html

代码：

＆＃13;

       <script>
        var data = {"Adventure": [
                {
                    "place": "What size do you want your pizza?",
                    "option1": {
                        "text": "Large",
                        "value": 1},
                    "option2": {
                        "text": "Medium",
                        "value": 1},
                    "option3": {
                        "text": "Small",
                        "value": 1}

                },
                {
                    "place": "What sauce do you want on your pizza?",
                    "option1": {
                        "text": "Marinara",
                        "value": 2},
                    "option2": {
                        "text": "Ranch",
                        "value": 2},
                    "option3": {
                        "text": "BBQ",
                        "value": 2}


                },
                {
                    "place": "What specialty toppings do you want on your pizza?",
                    "option1": {
                        "text": "All meat",
                        "value": 3},
                    "option2": {
                        "text": "All veggies",
                        "value": 3},
                    "option3": {
                        "text": "Hawaiian",
                        "value": 3}


                },
                {
                    "place": "Satisfied with your choice?",
                    "option1": {
                        "text": "Yes",
                        "value": 1},
                    "option2": {
                        "text": "Start over",
                        "value": 0}

                }
            ]};
        var choice = 0;
        function adventureOn(choice) {

            document.getElementById("placeholder").innerHTML = "<form><p>" + data.Adventure[choice].place + "</p><p> "
                    + "<input type=\"radio\" value=\"" + data.Adventure[choice].option1.value + "\" onchange=\"adventureOn(this.value)\">"
                    + data.Adventure[choice].option1.text 
                    + "<br><input type=\"radio\" value=\"" + data.Adventure[choice].option2.value + "\" onchange=\"adventureOn(this.value)\">"
                    + data.Adventure[choice].option2.text
                    + "<br><input type=\"radio\" value=\"" + data.Adventure[choice].option3.value + "\" onchange=\"adventureOn(this.value)\">"
                    + data.Adventure[choice].option3.text; 
        }
    </script>
</head>
<body>

    <div id="placeholder">
        <form>
            <p>Welcome to the pizza place</p>
            <p>
                <input type="radio" value="0" onchange="adventureOn(this.value)">Start here
            </p>
        </form>
    </div>
</body>

＆＃13;

Answer 1

要对其进行问题排查，您需要检查浏览器控制台并分析错误

当我在浏览器控制台中检查时，我发现缺少Option3，

                var data = {"Adventure": [
                {
                    "place": "What size do you want your pizza?",
                    "option1": {
                        "text": "Large",
                        "value": 1},
                    "option2": {
                        "text": "Medium",
                        "value": 1},
                    "option3": {
                        "text": "Small",
                        "value": 1}

                },
                {
                    "place": "What sauce do you want on your pizza?",
                    "option1": {
                        "text": "Marinara",
                        "value": 2},
                    "option2": {
                        "text": "Ranch",
                        "value": 2},
                    "option3": {
                        "text": "BBQ",
                        "value": 2}


                },
                {
                    "place": "What specialty toppings do you want on your pizza?",
                    "option1": {
                        "text": "All meat",
                        "value": 3},
                    "option2": {
                        "text": "All veggies",
                        "value": 3},
                    "option3": {
                        "text": "Hawaiian",
                        "value": 3}


                },
                {
                    "place": "Satisfied with your choice?",
                    "option1": {
                        "text": "Yes",
                        "value": 1},
                    "option2": {
                        "text": "Start over",
                        "value": 0},
                  "option3": {
                        "text": "Start over",
                        "value": 0}

                }
            ]};

点击此处更新的代码https://jsbin.com/kesesagule/edit?html,console,output

Answer 2

在最后一种情况下，

Option 3不存在。因此，只有在object

中有最后一个选项时，才创建一个函数并返回选项3

＆＃13;

var data = {
  "Adventure": [{
      "place": "What size do you want your pizza?",
      "option1": {
        "text": "Large",
        "value": 1
      },
      "option2": {
        "text": "Medium",
        "value": 1
      },
      "option3": {
        "text": "Small",
        "value": 1
      }

    },
    {
      "place": "What sauce do you want on your pizza?",
      "option1": {
        "text": "Marinara",
        "value": 2
      },
      "option2": {
        "text": "Ranch",
        "value": 2
      },
      "option3": {
        "text": "BBQ",
        "value": 2
      }


    },
    {
      "place": "What specialty toppings do you want on your pizza?",
      "option1": {
        "text": "All meat",
        "value": 3
      },
      "option2": {
        "text": "All veggies",
        "value": 3
      },
      "option3": {
        "text": "Hawaiian",
        "value": 3
      }


    },
    {
      "place": "Satisfied with your choice?",
      "option1": {
        "text": "Yes",
        "value": 1
      },
      "option2": {
        "text": "Start over",
        "value": 0
      }

    }
  ]
};
var choice = 0;

function adventureOn(choice) {
  var isOptionThree =
    document.getElementById("placeholder").innerHTML = "<form><p>" + data.Adventure[choice].place + "</p><p> " +
    "<input type=\"radio\" value=\"" + data.Adventure[choice].option1.value + "\" onchange=\"adventureOn(this.value)\">" +
    data.Adventure[choice].option1.text +
    "<br><input type=\"radio\" value=\"" + data.Adventure[choice].option2.value + "\" onchange=\"adventureOn(this.value)\">" +
    data.Adventure[choice].option2.text +
    // An IIFE to check if option 3 is present, if present create third option
    (function isOptThree() {
      if (data.Adventure[choice].option3) {
        return "<br><input type=\"radio\" value=\"" + data.Adventure[choice].option3.value + "\" onchange=\"adventureOn(this.value)\">" +
          data.Adventure[choice].option3.text;
      } else {
        return '';
      }

    }())



}

＆＃13;

<div id="placeholder">
  <form>
    <p>Welcome to the pizza place</p>
    <p>
      <input type="radio" value="0" onchange="adventureOn(this.value)">Start here
    </p>
  </form>
</div>

＆＃13;

JSON数组索引问题

2 个答案: