Javascriptでオブジェクトとループにブートストラップのドロップダウンを接続する

今回は、自分が行きたい場所をユーザが選択できるようにするコードを作ろうとしました。私はhtmlとjsを書いてきましたが、今ではそれらを接続して（約半日です...）立ち往生しています。私はブートストラップの助けを借りてドロップダウンメニューを書いています。私はそれらの場所をループするjsファイルも作成しました。Javascriptでオブジェクトとループにブートストラップのドロップダウンを接続する

アムステルダム

エストニアから

距離：2000キロ、このようなWebブラウザの何かで

var text = '<p>' + buses[i].to + '<br> - Distance from Estonia: ' + buses[i].distance + ' km <br> - Price: ' + buses[i].price + ' euros <br>'

：最後にそれがあるべき結果を選びだしたものをユーザーに理解してから出力する必要があります
価格：250ユーロ

しかし、私が試してみて、何も働いていない（私はそれが私の貧しい知識のためだと知っている、私はJSを非難しない）。私はどこにでも "id"と "onclick関数"を置こうとしました。

// If person is in some location 

document.getElementById("test2").innerHTML = "<hr> You're in Estonia, where would You want to travel?"; 

function bus() { 

// Object with info  
    var buses = [ 
    { to: 'Amsterdam', distance: 2000, price: 250}, 
    { to: 'Madrid', distance: 4500, price: 350}, 
    { to: 'Stockholm', distance: 1500, price: 90}, 
    { to: 'Riga', distance: 400, price: 100} 
    ]; 

// Should get result which user has choosen 
    var res = document.getElementById("boss"); 
    var result = res.value; 
    console.log(value); // outputs html row... >.> 

// Loop through the object 
    var text = ""; 
    for(var i = 0; i < (buses.length); i++) { 

    if (result == buses[i].to) { text = '<p>' + buses[i].to + '<br> - Distance from Estonia: ' + buses[i].distance + ' km <br> - Price: ' + buses[i].price + ' euros <br>'; 
    alert("Works!!!!"); // Well, last thing is to change it to output "var text" result 
    } 

    }; 
    document.getElementById("test2").innerHTML = text; // If everything is correct, this should output sentence about selected bus 
}

ありがとう：

だから、私はそれの少しの部分を貼り付けます、多分誰かが:)

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 

<body> 

<h2>Buses</h2> 

<p id="test1">...</p> 
<p id="test2">...</p> 

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


<!-- Dropdown menu for beautiful usage --> 

    <div class="dropdown"> 
    <button class="btn btn-secondary dropdown-toggle" id="dropdownMenu2" type="button"> 
    List of locations 
    </button> 
    <div class="dropdown-menu" aria-labelledby="dropdownMenu2"> 
    <ul id="boss"> 
     <li><a role="button" onclick="bus()" value="Amsterdam">">Amsterdam</a></li> 
     <li><a role="button" onclick="bus()" value="Madrid">Madrid</a></li> 
     <li><a role="button" onclick="bus()" value="Stockholm">Stockholm</a></li> 
     <li><a role="button" onclick="bus()" value="Riga">Riga</a></li> 
    </ul> 
    </div> 
</div> 

</body> 
</html>

そして、私のJSファイルを助けることができます！

出典

2017-01-13 Rainer Lanemann

は自身のonclick関数内で

<li><a role="button" onclick="bus('Amsterdam')">Amsterdam</a></li>

の街の値を渡し、関数内のようにそれを受け取る。この

function bus(value) { 
var result=value; 
}

出典

2017-01-13 13:45:45

私はそれがとても簡単だった信じることができない...ありがとう！ :) –

あなたは大歓迎です。 plsはチェックマークをクリックして回答を受け入れ/マークします。 @RainerLanemann –

Javascriptでオブジェクトとループにブートストラップのドロップダウンを接続する

答えて

関連する問題