为什么当我从两个函数之间移动一个变量并将其放在两个函数之上时，function 2 会变为未定义？

Question

I'm very new to JavaScript and I'm having a hard time understanding why my code is coming back as undefined.我是 JavaScript 的新手，我很难理解为什么我的代码返回时未定义。 I also can't seem to get the dropdown to function as it should.我似乎也无法按应有的方式将下拉列表显示为 function。

My CodePen: https://codepen.io/TiffSmith126/pen/KKZxdma我的 CodePen： https://codepen.io/TiffSmith126/pen/KKZxdma

Problem 1) When I move the variable for the dropdown to above window.firstFunction instead of placing it below window.firstFunction and above window.secondFunction, window.secondFunction becomes undefined.问题 1) 当我将下拉列表的变量移动到 window.firstFunction 以上而不是将其放置在 window.firstFunction 以下和 window.secondFunction 以上时，window.secondFunction 变为未定义。 I would like to know what's wrong and why this keeps happening in my code even though the function is defined.我想知道出了什么问题以及为什么即使定义了 function 也会在我的代码中发生这种情况。

Problem 2) This is my first time creating a dropdown and it's not working as desired.问题 2) 这是我第一次创建下拉菜单，它没有按预期工作。 I would like it to select an option and have it display one of two results of the first function. For example, in my code the two results are item1 and item2.我想给 select 一个选项，让它显示第一个 function 的两个结果之一。例如，在我的代码中，两个结果是 item1 和 item2。 I want my user to be able to select which item they want.我希望我的用户能够通过 select 找到他们想要的商品。

 const fruits = ["apple", "orange", "banana"]; const vegetables = ["carrot", "corn", "kale"]; const subjects = ["math", "science", "reading", "writing"]; let item1; let item2; var menu = document.getElementById("dropdown"); menu.addEventListener("change", firstFunction()); if (menu.value == "1") { void 0; } else if (menu.value == "2") { document.getElementById("instance").innerHTML = item1; } else if (menu.value == "3") { document.getElementById("instance").innerHTML = item2; } window.firstFunction = function () { var ranFruit = Math.floor(Math.random() * 3); var ranVegetable = Math.floor(Math.random() * 3); let bowl = []; let plate = []; var situation1 = "some text " + fruits[ranFruit] + "some more text " + vegetables[ranVegetable]; bowl.push(situation1); var situation2 = "some text " + fruits[ranFruit] + "some more text" + vegetables[ranVegetable]; plate.push(situation2); var situation3 = "some text " + fruits[ranFruit] + "some more text" + vegetables[ranVegetable]; bowl.push(situation3); var situation4 = "some text " + fruits[ranFruit] + "some more text" + vegetables[ranVegetable]; plate.push(situation4); var ranBowls = Math.floor(Math.random() * 2); var ranPlates = Math.floor(Math.random() * 2); var item1 = bowl[ranBowls]; var item2 = plate[ranPlates]; }; firstFunction(); window.secondFunction = function () { var ranSubject = Math.floor(Math.random() * 4); var sentence = "some more text" + subjects[ranSubject] + "even more great text"; document.getElementById("sentence").innerHTML = sentence; }; secondFunction();

 <head> <title>Generator</title> <head> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> </head> <body> <div class="generator-container"> <div class="title">Generator </div> <div class="container-one"> <span>Details</span> <select id="dropdown"> <option value="1">Select</option> <option value="2">Bowls</option> <option value="3">Plates</option> </select> <button type="button" onclick="firstFunction()">Generate<i class=" fa fa-generate" aria-hidden="true"></i></button> <br> <span id='instance'></span> </div> <div class="container-two"><span>Additional Data</span> <button type="button" onclick="secondFunction()">Generate<i class=" fa fa-generate" aria-hidden="true"></i></button> <br> <span>Subject Sentence:</span> <br> <span id="sentence"></span><br><br> </div> </body>

Answer 1

Since JavaScript is an script language & is run in order it does not know about functions that it hasn't read yet.由于 JavaScript 是一种脚本语言，因此运行时它不知道尚未读取的函数。

Your calling firstFunction before it is defined when you add the listener to the menu.当您将侦听器添加到菜单时，您在定义 firstFunction 之前调用它。
Moving移动

menu.addEventListener("change", firstFunction());

to the end makes it work到最后使它起作用

const fruits = ["apple", "orange", "banana"];
const vegetables = ["carrot", "corn", "kale"];
const subjects = ["math", "science", "reading", "writing"];

let item1;
let item2;

var menu = document.getElementById("dropdown");
if (menu.value == "1") {
  void 0;
} else if (menu.value == "2") {
  document.getElementById("instance").innerHTML = item1;
} else if (menu.value == "3") {
  document.getElementById("instance").innerHTML = item2;
}


window.firstFunction = function () {
  var ranFruit = Math.floor(Math.random() * 3);
  var ranVegetable = Math.floor(Math.random() * 3);
  let bowl = [];
  let plate = [];

  var situation1 =
    "some text " +
    fruits[ranFruit] +
    "some more text " +
    vegetables[ranVegetable];
  bowl.push(situation1);

  var situation2 =
    "some text " +
    fruits[ranFruit] +
    "some more text" +
    vegetables[ranVegetable];
  plate.push(situation2);

  var situation3 =
    "some text " +
    fruits[ranFruit] +
    "some more text" +
    vegetables[ranVegetable];
  bowl.push(situation3);

  var situation4 =
    "some text " +
    fruits[ranFruit] +
    "some more text" +
    vegetables[ranVegetable];
  plate.push(situation4);

  var ranBowls = Math.floor(Math.random() * 2);
  var ranPlates = Math.floor(Math.random() * 2);

  var item1 = bowl[ranBowls];
  var item2 = plate[ranPlates];
};

firstFunction();


window.secondFunction = function () {
  var ranSubject = Math.floor(Math.random() * 4);
  var sentence =
    "some more text " + subjects[ranSubject] + " even more great text";
  document.getElementById("sentence").innerHTML = sentence;
};

secondFunction();
menu.addEventListener("change", firstFunction());

为什么当我从两个函数之间移动一个变量并将其放在两个函数之上时，function 2 会变为未定义？

问题描述

1 个解决方案

解决方案1
0 2022-04-12 19:48:08

为什么当我从两个函数之间移动一个变量并将其放在两个函数之上时，function 2 会变为未定义？

问题描述

1 个解决方案

解决方案1 0 2022-04-12 19:48:08

解决方案1
0 2022-04-12 19:48:08