如何在特定 DIV 中的 DOM 中更早地激活 JavaScript？

Question

我正在尝试构建一个简单的 JavaScript 程序，您可以在其中单击列表中的特定水果，它会提供有关水果的一些信息，并将 3d 渲染模型加载到 DIV 窗口中。

我快完成了，但不明白如何根据用户点击的内容激活 div 中的脚本。现在我只是想通过激活控制台日志来测试它。

我正在尝试的一种方法是在 div 中放入一些脚本并通过放入一个在其值更改时激活的语句来激活它，但我也没有成功。这是我的第一个项目，所以这里可能有很多愚蠢的东西 - 请也批评我

我目前已将其设置为在 Peach 上激活

    //have clicked fruit items relay to function
    var apple = document.getElementById('apple').onclick = apple;
    var banana = document.getElementById('banana').onclick = banana;
    var strawberry = document.getElementById('strawberry').onclick = strawberry;
    var orange = document.getElementById('orange').onclick = orange;
    var pineapple = document.getElementById('pineapple').onclick = pineapple;
    var blueberry = document.getElementById('blueberry').onclick = blueberry;
    var grape = document.getElementById('grape').onclick = grape;
    var lemon = document.getElementById('lemon').onclick = lemon;
    var kiwi = document.getElementById('kiwi').onclick = kiwi;
    var watermelon = document.getElementById('watermelon').onclick = watermelon;
    var peach = document.getElementById('peach').onclick = peach;
    
    //redefine variables --> reset styling
    function styleReset() {
        
        var apple = document.getElementById("apple");
        apple.style.color = "hotpink";
        
        var banana = document.getElementById("banana");
        banana.style.color = "hotpink";
        
        var strawberry = document.getElementById("strawberry");
        strawberry.style.color = "hotpink";
       
        var orange = document.getElementById("orange");
        orange.style.color = "hotpink";
        
        var pineapple = document.getElementById("pineapple");
        pineapple.style.color = "hotpink";
        
        var blueberry = document.getElementById("blueberry");
        blueberry.style.color = "hotpink";
        
        var grape = document.getElementById("grape");
        grape.style.color = "hotpink";
        
        var lemon = document.getElementById("lemon");
        lemon.style.color = "hotpink";
        
        var kiwi = document.getElementById("kiwi");
        kiwi.style.color = "hotpink";
       
        var watermelon = document.getElementById("watermelon");
        watermelon.style.color = "hotpink";
       
        var peach = document.getElementById("peach");
        peach.style.color = "hotpink";
    }

    //define each fruit function
    function apple(){
        console.log("loading apple");
        styleReset();
        var apple = document.getElementById('apple');
        apple.style.color = "red";
        fruitName = document.getElementById('fruitName');
        fruitName.innerText = "Apple";
        fruitDesc = document.getElementById('fruitDesc');
        fruitDesc.innerText = "An apple is a sweet, edible fruit produced by an apple tree (Malus pumila). Apple trees are cultivated worldwide and are the most widely grown species in the genus Malus. The tree originated in Central Asia, where its wild ancestor, Malus sieversii, is still found today. Apples have been grown for thousands of years in Asia and Europe and were brought to North America by European colonists.";
    }

    function banana(){
        console.log("loading banana");
        styleReset();
        var banana = document.getElementById('banana');
        banana.style.color = "gold";
        fruitName = document.getElementById('fruitName');
        fruitName.innerText = "Banana";
        fruitDesc = document.getElementById('fruitDesc');
        fruitDesc.innerText = "A banana is an edible fruit – botanically a berry – produced by several kinds of large herbaceous flowering plants in the genus Musa. In some countries, bananas used for cooking may be called 'plantains.' Musa species are native to tropical Indomalaya and Australia, and are likely to have been first domesticated in Papua New Guinea. They are grown in 135 countries and the world's largest producers of bananas are India and China";
    }

    function strawberry(){
        console.log("loading strawberry");
        styleReset();
        var strawberry = document.getElementById('strawberry');
        strawberry.style.color = "red";
        fruitName = document.getElementById('fruitName');
        fruitName.innerText = "Strawberry";
        fruitDesc = document.getElementById('fruitDesc');
        fruitDesc.innerText = "The garden strawberry is a widely grown hybrid species of the genus Fragaria, collectively known as the strawberries. It is cultivated worldwide for its fruit. The fruit is widely appreciated for its characteristic aroma, bright red color, juicy texture, and sweetness.";
    }

    function orange(){
        console.log("loading orange");
        styleReset();
        var orange = document.getElementById('orange');
        orange.style.color = "peru";
        fruitName = document.getElementById('fruitName');
        fruitName.innerText = "Orange";
        fruitDesc = document.getElementById('fruitDesc');
        fruitDesc.innerText = "The orange is the fruit of the citrus species Citrus × sinensis in the family Rutaceae.  It is known as the 'Sweet Orange.' It originated in ancient China and the earliest mention of the sweet orange was in Chinese literature in 314 BC. As of 1987, orange trees were found to be the most cultivated fruit tree in the world. In 2014, 70.9 million tonnes of oranges were grown worldwide, with Brazil producing 24% of the world total followed by China and India. Oranges are infertile and reproduce asexually.";
    }

    function pineapple(){
        console.log("loading pineapple");
        styleReset();
        var pineapple = document.getElementById('pineapple');
        pineapple.style.color = "yellow";
        fruitName = document.getElementById('fruitName');
        fruitName.innerText = "Pineapple";
        fruitDesc = document.getElementById('fruitDesc');
        fruitDesc.innerText = "The word 'pineapple' in English was first recorded to describe the reproductive organs of conifer trees (now termed pine cones). When European explorers encountered this tropical fruit in the Americas, they called them 'pineapples' (first referenced in 1664, for resemblance to pine cones). The plant is indigenous to South America and is said to originate from the area between southern Brazil and Paraguay. Columbus encountered the pineapple in 1493 on the leeward island of Guadeloupe. He called it piña de Indes, meaning 'pine of the Indians', and brought it back with him to Spain.";
    }

    function blueberry(){
        console.log("loading blueberry");
        styleReset();
        var blueberry = document.getElementById('blueberry');
        blueberry.style.color = "blue";
        fruitName = document.getElementById('fruitName');
        fruitName.innerText = "Blueberry";
        fruitDesc = document.getElementById('fruitDesc');
        fruitDesc.innerText = "Blueberries are perennial flowering plants with blue– or purple–colored berries. They are classified in the section Cyanococcus within the genus Vaccinium. Commercial 'blueberries' are all native to North America. They are covered in a protective coating of powdery epicuticular wax, colloquially known as the 'bloom'. They have a sweet taste when mature, with variable acidity. ";
    }

    function grape(){
        console.log("loading grape");
        styleReset();
        var grape = document.getElementById('grape');
        grape.style.color = "purple";
        fruitName = document.getElementById('fruitName');
        fruitName.innerText = "Grape";
        fruitDesc = document.getElementById('fruitDesc');
        fruitDesc.innerText = "A grape is a fruit, botanically a berry, of the deciduous woody vines of the flowering plant genus Vitis. Grapes are a non-climacteric type of fruit, generally occurring in clusters. The cultivation of the domesticated grape began 6,000–8,000 years ago in the Near East.[1] Yeast, one of the earliest domesticated microorganisms, occurs naturally on the skins of grapes, leading to the discovery of alcoholic drinks such as wine. The earliest archeological evidence for a dominant position of wine-making in human culture dates from 8,000 years ago in Georgia.";
    }

    function lemon(){
        console.log("loading lemon");
        styleReset();
        var lemon = document.getElementById('lemon');
        lemon.style.color = "yellow";
        fruitName = document.getElementById('fruitName');
        fruitName.innerText = "Lemon";
        fruitDesc = document.getElementById('fruitDesc');
        fruitDesc.innerText = "The lemon, Citrus limon Osbeck, is a species of small evergreen tree in the flowering plant family Rutaceae, native to South Asia, primarily North eastern India. The juice of the lemon is about 5% to 6% citric acid, with a pH of around 2.2, giving it a sour taste. The distinctive sour taste of lemon juice makes it a key ingredient in drinks and foods such as lemonade and lemon meringue pie.";
    }

    function kiwi(){
        console.log("loading kiwi");
        styleReset();
        var kiwi = document.getElementById('kiwi');
        kiwi.style.color = "green";
        fruitName = document.getElementById('fruitName');
        fruitName.innerText = "Kiwi";
        fruitDesc = document.getElementById('fruitDesc');
        fruitDesc.innerText = "Kiwi is the edible berry of several species of woody vines in the genus Actinidia. It has a fibrous, dull greenish-brown skin and bright green or golden flesh with rows of tiny, black, edible seeds. Kiwifruit is native to north-central and eastern China. The first recorded description of the kiwifruit dates to 12th century China during the Song dynasty.  China produced 56% of the world total of kiwifruit in 2016.";
    }

    function watermelon(){
        console.log("loading watermelon");
        styleReset();
        var watermelon = document.getElementById('watermelon');
        watermelon.style.color = "crimson";
        fruitName = document.getElementById('fruitName');
        fruitName.innerText = "Watermelon";
        fruitDesc = document.getElementById('fruitDesc');
        fruitDesc.innerText = "Citrullus lanatus is a plant species in the family Cucurbitaceae, a vine-like flowering plant originating in West Africa. It is cultivated for its fruit. There is evidence from seeds in Pharaoh tombs of watermelon cultivation in Ancient Egypt. Watermelon is grown in tropical and subtropical areas worldwide for its large edible fruit, also known as a watermelon, which is a special kind of berry with a hard rind and no internal division, botanically called a pepo.";
    }

    function peach(){
        console.log("loading peach");
        styleReset();
        var peach = document.getElementById('peach');
        peach.style.color = "peru";
        fruitName = document.getElementById('fruitName');
        fruitName.innerText = "Peach";
        fruitDesc = document.getElementById('fruitDesc');
        fruitDesc.innerText = "The peach (Prunus persica) is a deciduous tree native to the region of Northwest China between the Tarim Basin and the north slopes of the Kunlun Mountains, where it was first domesticated and cultivated. The specific name persica refers to its widespread cultivation in Persia (modern-day Iran), from where it was transplanted to Europe. China alone produced 58% of the world's total for peaches and nectarines in 2016.";
        //activate 3d view window
        var x = document.getElementById('x');
        x.innerHTML = 1;
    }
    

* {
    margin: 0px;
    padding: 0px;
    border: 0px;
}



.container {
background-color: beige;
width: 600px;
min-height: 550px;
border-radius: 30px;
margin: 40px auto;
}

.title {
    font-family: sans-serif;
    margin: 20px 20px 20px 20px;
    color: indianred;
    display: inline-block;
    float: left;
}

.box3d {
    float: right;
    height: 225px;
    width: 280px;
    background-color: slategray;
    display: inline-block;
    margin: 25px 50px 0px 0px;
}

.desc {
    float: right;
    height: 225px;
    width: 350px;
    background-color: white;
    display: inline-block;
    margin: 25px 50px 0px 0px;
    overflow: auto;
}

.fruitlist {
    padding-left: 20px;
    margin: 20px 0px 0px 30px;
    list-style: none;
    display: inline-block;
    float: left;
}

li {
    margin-bottom: 12px;
    font-family: sans-serif;
    color: purple;
    font-size: 18px;
}

li:hover {
    font-size: 20px;
    color: hotpink;
}

#fruitName {
    color: blue;
    margin: 10px 10px 10px 10px;
    border-bottom: solid 3px blue;
    font-family: sans-serif;
}

#fruitDesc {
    margin: 10px 10px 0px 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FruityView</title>
    <link rel="stylesheet" href="fruitstyle.css">
</head>

<body>
    
<div class = "container">

<h1 class = "title">FruityView</h1>
<!--3D MODEL VIEW WINDOW-->
<div class="box3d" id = "box3d">
    
    <p id='x'>0</p>
    
    <script>
       
      //this doesn't work - maybe I could do some sort of for loop that could retest it? 
      var x = document.getElementById('x');
       console.log(x); 
        function view3d() {
            console.log("view function activated");
        }
        
        if (x == 1) {
            view3d();
        }
      
        //this doesn't work - I know it would if it came after the list but I don't want to do that
        /*var peach = document.getElementById('peach').onclick = peach;
        peach() {
            console.log("successful activation");
        }
        */

    </script>

</div>
<br>

<!--SELECTION LIST-->
<ul class="fruitlist">

    <li id = "apple">Apple</li>
    <li id = "banana">Banana</li>
    <li id = "strawberry">Strawberry</li>
    <li id = "orange">Orange</li>
    <li id = "pineapple">Pineapple</li>
    <li id = "blueberry">Blueberry</li>
    <li id = "grape">Grape</li>
    <li id = "lemon">Lemon</li>
    <li id = "kiwi">Kiwi</li>
    <li id = "watermelon">Watermelon</li>
    <li id = "peach">Peach</li>

</ul>

<!--NAME AND DESCRIPTION-->
<div class="desc">
    <h3 id = "fruitName">Welcome to FruityView</h3>
    <p id = "fruitDesc">Please pick a fruit</p>
</div>

</div>

<script src="fruityview.js"></script>

</body>
</html>  

Answer 1

在我看来，对<script> 的作用以及为什么不能在列表前使用document.getElementById 存在误解。所以我会试着解释一下。

您直接放入<script> 的任何内容都会在浏览器读取时立即执行。

这意味着该脚本之后的 DOM 中的任何元素都不存在，这就是 document.getElementById() 找不到这样一个元素的原因。

所以它失败的原因不是“JavaScript未激活”，而是具有ID的元素还不存在。

如果您想在脚本元素中声明代码，然后再调用它，您只需将其包装在一个函数中，如下所示：

<script>
function callMeLater() {
  var x = document.getElementById('x');
}
</script>
…
<script>
/* now all above elements exist */
callMeLater();
</script>

此外，没有必要在包含模型的<div> 中放置脚本。您可以随时通过innerHTML 将 HTML 注入到元素中（一旦它存在于 DOM 中）。

document.getElementById('box3d').innerHTML = 3dModelHtml;

最后，我想提一下，你有很多重复的代码，你应该尽量避免。将它们替换为您存储数据的函数和对象。

例如，使用一个对象来存储fruitIds及其描述：

var fruitDescriptions = {
  'apple': "An apple is a sweet, edible fruit produced by an apple tree (Malus pumila). Apple trees are cultivated worldwide and are the most widely grown species in the genus Malus. The tree originated in Central Asia, where its wild ancestor, Malus sieversii, is still found today. Apples have been grown for thousands of years in Asia and Europe and were brought to North America by European colonists.",
   'banana': "…",
}

然后，您可以使用 for…in 遍历水果，以将事件处理程序绑定到每个水果并重置其样式：

for(fruitId in fruitDescriptions) {
  var fruit = document.getElementById(fruitId);
  fruit.click = function() { fruit(fruitId); }
  fruit.style.color = "hotpink";
}

（事件处理程序需要另一个函数，将参数fruitId 传递给实际处理程序）

最后，重构你的重复函数以使用水果作为参数：

function fruit(fruitId){
    console.log("loading " + fruitId);
    styleReset();
    var fruit = document.getElementById(fruitId);
    fruit.style.color = "red";
    fruitName = document.getElementById('fruitName');
    fruitName.innerText = fruitId;
    fruitDesc = document.getElementById('fruitDesc');
    fruitDesc.innerText = fruitDescriptions[fruitId];
}

Answer 2

考虑将水果信息存储为数据并使用一些常用的共享函数进行渲染。

您能否告诉我们 3D 数据的来源，我们可以添加该功能。

let fruits = [{
    name: "apple",
    description: "An apple is a sweet, edible fruit produced by an apple tree (Malus pumila). Apple trees are cultivated worldwide and are the most widely grown species in the genus Malus. The tree originated in Central Asia, where its wild ancestor, Malus sieversii, is still found today. Apples have been grown for thousands of years in Asia and Europe and were brought to North America by European colonists.",
    color: "green"
  },
  {
    name: "banana",
    description: "A banana is an edible fruit – botanically a berry – produced by several kinds of large herbaceous flowering plants in the genus Musa. In some countries, bananas used for cooking may be called 'plantains.' Musa species are native to tropical Indomalaya and Australia, and are likely to have been first domesticated in Papua New Guinea. They are grown in 135 countries and the world's largest producers of bananas are India and China",
    color: "gold"
  },
  {
    name: "strawberry",
    description: "The garden strawberry is a widely grown hybrid species of the genus Fragaria, collectively known as the strawberries. It is cultivated worldwide for its fruit. The fruit is widely appreciated for its characteristic aroma, bright red color, juicy texture, and sweetness.",
    color: "red"
  },
  {
    name: "orange",
    description: "The orange is the fruit of the citrus species Citrus × sinensis in the family Rutaceae.  It is known as the 'Sweet Orange.' It originated in ancient China and the earliest mention of the sweet orange was in Chinese literature in 314 BC. As of 1987, orange trees were found to be the most cultivated fruit tree in the world. In 2014, 70.9 million tonnes of oranges were grown worldwide, with Brazil producing 24% of the world total followed by China and India. Oranges are infertile and reproduce asexually.",
    color: "peru"
  },
  {
    name: "pineapple",
    description: "The word 'pineapple' in English was first recorded to describe the reproductive organs of conifer trees (now termed pine cones). When European explorers encountered this tropical fruit in the Americas, they called them 'pineapples' (first referenced in 1664, for resemblance to pine cones). The plant is indigenous to South America and is said to originate from the area between southern Brazil and Paraguay. Columbus encountered the pineapple in 1493 on the leeward island of Guadeloupe. He called it piña de Indes, meaning 'pine of the Indians', and brought it back with him to Spain.",
    color: "yellow"
  },
  {
    name: "blueberry",
    description: "Blueberries are perennial flowering plants with blue– or purple–colored berries. They are classified in the section Cyanococcus within the genus Vaccinium. Commercial 'blueberries' are all native to North America. They are covered in a protective coating of powdery epicuticular wax, colloquially known as the 'bloom'. They have a sweet taste when mature, with variable acidity.",
    color: "blue"
  },
  {
    name: "grape",
    description: "A grape is a fruit, botanically a berry, of the deciduous woody vines of the flowering plant genus Vitis. Grapes are a non-climacteric type of fruit, generally occurring in clusters. The cultivation of the domesticated grape began 6,000–8,000 years ago in the Near East.[1] Yeast, one of the earliest domesticated microorganisms, occurs naturally on the skins of grapes, leading to the discovery of alcoholic drinks such as wine. The earliest archeological evidence for a dominant position of wine-making in human culture dates from 8,000 years ago in Georgia.",
    color: "purple"
  },
  {
    name: "lemon",
    description: "The lemon, Citrus limon Osbeck, is a species of small evergreen tree in the flowering plant family Rutaceae, native to South Asia, primarily North eastern India. The juice of the lemon is about 5% to 6% citric acid, with a pH of around 2.2, giving it a sour taste. The distinctive sour taste of lemon juice makes it a key ingredient in drinks and foods such as lemonade and lemon meringue pie.",
    color: "yellow"
  },
  {
    name: "kiwi",
    description: "Kiwi is the edible berry of several species of woody vines in the genus Actinidia. It has a fibrous, dull greenish-brown skin and bright green or golden flesh with rows of tiny, black, edible seeds. Kiwifruit is native to north-central and eastern China. The first recorded description of the kiwifruit dates to 12th century China during the Song dynasty.  China produced 56% of the world total of kiwifruit in 2016.",
    color: "green"
  },
  {
    name: "watermelon",
    description: "Citrullus lanatus is a plant species in the family Cucurbitaceae, a vine-like flowering plant originating in West Africa. It is cultivated for its fruit. There is evidence from seeds in Pharaoh tombs of watermelon cultivation in Ancient Egypt. Watermelon is grown in tropical and subtropical areas worldwide for its large edible fruit, also known as a watermelon, which is a special kind of berry with a hard rind and no internal division, botanically called a pepo.",
    color: "crimson"
  },
  {
    name: "peach",
    description: "The peach (Prunus persica) is a deciduous tree native to the region of Northwest China between the Tarim Basin and the north slopes of the Kunlun Mountains, where it was first domesticated and cultivated. The specific name persica refers to its widespread cultivation in Persia (modern-day Iran), from where it was transplanted to Europe. China alone produced 58% of the world's total for peaches and nectarines in 2016.",
    color: "peru"
  }
];

function resetStyle() {
  document.querySelectorAll('li').forEach(x => x.style.color = 'hotpink');
}

function setFruit(fruit) {
  console.log(`loading ${fruit.name}`);

  let elem = document.getElementById(fruit.name);
  elem.style.color = fruit.color;
  fruitName = document.getElementById('fruitName');
  fruitName.innerText = fruit.name;
  fruitDesc = document.getElementById('fruitDesc');
  fruitDesc.innerText = fruit.description;
  //activate 3d view window
  var x = document.getElementById('x');
  x.innerHTML = 1;
}

document.addEventListener('click', (e) => {
  if (e.target.matches('li')) {
    resetStyle();
    setFruit(fruits.find(f => f.name === e.target.id));
  }
});

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.container {
  background-color: beige;
  width: 600px;
  min-height: 550px;
  border-radius: 30px;
  margin: 40px auto;
}

.title {
  font-family: sans-serif;
  margin: 20px 20px 20px 20px;
  color: indianred;
  display: inline-block;
  float: left;
}

.box3d {
  float: right;
  height: 225px;
  width: 280px;
  background-color: slategray;
  display: inline-block;
  margin: 25px 50px 0px 0px;
}

.desc {
  float: right;
  height: 225px;
  width: 350px;
  background-color: white;
  display: inline-block;
  margin: 25px 50px 0px 0px;
  overflow: auto;
}

.fruitlist {
  padding-left: 20px;
  margin: 20px 0px 0px 30px;
  list-style: none;
  display: inline-block;
  float: left;
}

li {
  margin-bottom: 12px;
  font-family: sans-serif;
  color: purple;
  font-size: 18px;
}

li:hover {
  font-size: 20px;
  color: hotpink;
}

#fruitName {
  color: blue;
  margin: 10px 10px 10px 10px;
  border-bottom: solid 3px blue;
  font-family: sans-serif;
}

#fruitDesc {
  margin: 10px 10px 0px 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>FruityView</title>
  <link rel="stylesheet" href="fruitstyle.css">
</head>

<body>

  <div class="container">

    <h1 class="title">FruityView</h1>
    <!--3D MODEL VIEW WINDOW-->
    <div class="box3d" id="box3d">

      <p id='x'>0</p>

      <script>
        //this doesn't work - maybe I could do some sort of for loop that could retest it? 
        var x = document.getElementById('x');
        console.log(x);

        function view3d() {
          console.log("view function activated");
        }

        if (x == 1) {
          view3d();
        }

        //this doesn't work - I know it would if it came after the list but I don't want to do that
        /*var peach = document.getElementById('peach').onclick = peach;
        peach() {
            console.log("successful activation");
        }
        */
      </script>

    </div>
    <br>

    <!--SELECTION LIST-->
    <ul class="fruitlist">

      <li id="apple">Apple</li>
      <li id="banana">Banana</li>
      <li id="strawberry">Strawberry</li>
      <li id="orange">Orange</li>
      <li id="pineapple">Pineapple</li>
      <li id="blueberry">Blueberry</li>
      <li id="grape">Grape</li>
      <li id="lemon">Lemon</li>
      <li id="kiwi">Kiwi</li>
      <li id="watermelon">Watermelon</li>
      <li id="peach">Peach</li>

    </ul>

    <!--NAME AND DESCRIPTION-->
    <div class="desc">
      <h3 id="fruitName">Welcome to FruityView</h3>
      <p id="fruitDesc">Please pick a fruit</p>
    </div>

  </div>


</body>

</html>