如何在特定DIV中的DOM中早期激活JavaScript?

问题描述 投票:1回答:2

我正在尝试构建一个简单的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>  
javascript jquery html oop
2个回答
1
投票

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

您能告诉我们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>

0
投票

在我看来,有一个误解<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传递给实际的处理程序)

最后,重构您的重复函数以使用fruit作为参数:

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];
}
© www.soinside.com 2019 - 2024. All rights reserved.