Question

我可以让我的图像数组正常运行，但不能让价格和文本数组也能正常工作。我需要显示所有第一个索引，依此类推。我很难过，也不知道。

我宁愿不使用jQuery。

＆＃13;

<!DOCTYPE html>
<html>
<body bgcolor="#999966">
  <center>
    <h1> Welcome to Project 6, Arrays </h1>
    <h2> Please select a fruit to display a picture of it and a button. Then click the button to display detailed information of the fruit you selected, </h2>
  </center>
  <center>
    <select id="myFruitSelect">
      <option value="0">Please Choose a Fruit</option>
      <option value="1">Apple</option>
      <option value="2">Orange</option>
      <option value="3">Pineapple</option>
      <option value="4">Banana</option>
      <option value="5">Watermelon</option>
    </select>
    <br>
    <button onclick="myFunction()">Select Your Fruit</button>
    <img id="outputImage" src="" height="100" width="100" />
    <div id="outputPrice" src="" height="100" width="100" />
    <div id="outputText" src="" height="100" width="100" />
  </center>
  <script>
    function myFunction() {
      var pictures = ["apple.png", "orange.png", "pineapple.png", "banana.png", "watermelon.png"];
      var prices = [0.99, 1.99, 2.99, 3.99, 4.99];
      var text = ["test1", "test2", "test3", "test4", "test 5"];
      var x = document.getElementById("myFruitSelect").value;
      document.getElementById('outputImage').src = pictures[x - 1];
      var y = document.getElementById("myFruitSelect").value;
      document.getElementById('outputPrice').src = prices[y - 1];
      var z = document.getElementById("myFruitSelect").value;
      document.getElementById('outputText').src = text[z - 1];
    }
  </script>
</body>
</html>

＆＃13;

Answer 1

你的div代码应该是这样的

<div id="Whatever-id">Content</div>

Divs没有src属性

查看简单说明 - http://www.w3schools.com/tags/tag_div.asp 或更完整 - https://developer.mozilla.org/en/docs/Web/HTML/Element/div

所以你的JS看起来像这样 -

document.getElementById('outputPrice').innerHTML = prices[y-1];

Answer 2

您尝试在HTML和javascript中定义div src。看看我们的代码之间的区别，以及使用innerHTML来定义元素内容。

<!DOCTYPE html>
<html>
<body bgcolor="#999966">


<center>

<h1> Welcome to Project 6, Arrays <h1>

<h2> Please select a fruit to display a picture of it and a button. Then click the button to display detailed information of the fruit you selected, </h2>

</center>

<center>
 <select id="myFruitSelect">
    <option value="0"> Please Choose a Fruit </option>
    <option value="1"> Apple</option>
    <option value="2">Orange</option>
    <option value="3">Pineapple</option>
    <option value="4">Banana</option>
    <option value="5">Watermelon </option>
  </select>
</form>

<br>

<button onclick="myFunction()"> Select Your Fruit</button>

<img id="outputImage" src="" height="100" width="100" />

<div id="outputPrice"  height="100" width="100"  ></div>
<div id="outputText"  height="100" width="100"  ></div>








</center>

<script>
function myFunction() {
    var pictures=[ "apple.png", "orange.png", "pineapple.png", "banana.png", "watermelon.png"];
    var prices= [0.99 , 1.99, 2.99 , 3.99 , 4.99];
    var text= ["test1", "test2", "test3", "test4", "test 5" ];
    var x = document.getElementById("myFruitSelect").value; 
    document.getElementById('outputImage').src = pictures[x-1];
    var y = document.getElementById("myFruitSelect").value; 
    document.getElementById('outputPrice').innerHTML = prices[y-1];
     var z = document.getElementById("myFruitSelect").value; 
    document.getElementById('outputText').innerHTML = text[z-1];

    }


</script>

</body>
</html>

如何一次显示多个数组中的值？

2 个答案: