複数の配列の値を一度に表示する方法は？

-1

私のイメージアレイを正しく機能させることはできますが、価格とテキスト配列を正しく動作させることはできません。私は最初のインデックスのすべてを表示する必要があります。私はそんなに困惑してしまいました。複数の配列の値を一度に表示する方法は？

私はむしろjQueryを使用しません。 http://www.w3schools.com/tags/tag_div.asp 以上の完全な - この

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

のdivが

は簡単な説明を参照してください。src属性を持たないようにdivのための

<!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>

出典

2016-08-05 Ryan Stav

まず第一に、BGCOLORとセンターが廃止されました - 代わりにスタイリングを使用しています。 div内に情報を配置するには、innerHTML not valueを使用します。 – jeff

あなたのコードはする必要があります - https://developer.mozilla.org/en/docs/Web/HTML/Element/div

は、だからあなたのJSは、このようになります -

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

出典

2016-08-05 04:33:23

あなたが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>

出典

2016-08-05 04:34:45 technico

複数の配列の値を一度に表示する方法は？

答えて

関連する問題