複数選択でJavaScriptを使用してinnerhtmlを更新する

Question

私はJavaScriptを初めて使い慣れていますが、私が行っているように勉強しようとしています。だから私の質問は、フォーム内の複数の動的に生成された<select>に関するもので、対応するdiv>spanのコンテンツを価格で更新するために使用しています。私はいくつかの方法でこれを実行しようとしましたが、私はそれを修正する方法を知るために十分に生成されたエラーを理解していません。 基本的に私はドメインの購入価格を列挙しており、ユーザーはそのドメイン名が何であるかを判断します。以下の例では、ドメイン名を厳密にコーディングしていますが、私のスクリプトではPHPのセッション情報によって生成されます。

https://jsfiddle.net/Lzq3vcb8/

function getPrice(domain) { 
 
    var getdom = domain + "_prices"; 
 
    var putdom = domain + "_displayprice"; 
 
    var inner = document.getElementById(getdom).value; 
 
    document.getElementById(putdom).innerHTML = inner; 
 
}

<div class="row"> 
 
    <div class="col-lg-6"> 
 
    <select class="form-control" onchange="getPrice('websiteone.info')" id="websiteone.info_prices"> 
 
     <option data-price="11.29" value="1">1 Year</option> 
 
     <option data-price="11.29" value="2">2 Years</option> 
 
     <option data-price="11.29" value="3">3 Years</option> 
 
     <option data-price="11.29" value="4">4 Years</option> 
 
     <option data-price="11.29" value="5">5 Years</option> 
 
     <option data-price="11.29" value="6">6 Years</option> 
 
     <option data-price="11.29" value="7">7 Years</option> 
 
     <option data-price="11.29" value="8">8 Years</option> 
 
     <option data-price="11.29" value="9">9 Years</option> 
 
     <option data-price="11.29" value="10">10 Years</option> 
 
    </select> 
 
    </div> 
 
    <div class="col-lg-6"> 
 
    <select class="form-control" onchange="getPrice('websitetwo.info')" id="websitetwo.info_prices"> 
 
     <option data-price="11.29" value="1">1 Year</option> 
 
     <option data-price="11.29" value="2">2 Years</option> 
 
     <option data-price="11.29" value="3">3 Years</option> 
 
     <option data-price="11.29" value="4">4 Years</option> 
 
     <option data-price="11.29" value="5">5 Years</option> 
 
     <option data-price="11.29" value="6">6 Years</option> 
 
     <option data-price="11.29" value="7">7 Years</option> 
 
     <option data-price="11.29" value="8">8 Years</option> 
 
     <option data-price="11.29" value="9">9 Years</option> 
 
     <option data-price="11.29" value="10">10 Years</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-lg-6 alert alert-warning"><span id="websiteone_displayprice">test1</span> 
 
    </div> 
 
    <div class="col-lg-6 alert alert-warning"><span id="websitetwo_displayprice">test2</span> 
 
    </div> 
 
</div>

Answer 1

あなたは出力要素だが、あなたはJavaScriptをターゲット要素に一致しない、以下のコードを確認してください。ドメインが.infoであるため、のウェブサイトの場合はウェブサイトの非表示版を使用し、表示価格の前に追加されます。

<div class="row"> 
    <div class="col-lg-6 alert alert-warning"><span id="websiteone.info_displayprice">test1</span> 
    </div> 
    <div class="col-lg-6 alert alert-warning"><span id="websitetwo.info_displayprice">test2</span> 
    </div> 
</div> 

function getPrice(domain) { 
 
    var getdom = domain + "_prices"; 
 
    var putdom = domain + "_displayprice"; 
 
    var inner = document.getElementById(getdom).value; 
 
    document.getElementById(putdom).innerHTML = inner; 
 
}

<div class="row"> 
 
    <div class="col-lg-6"> 
 
    <select class="form-control" onchange="getPrice('websiteone.info')" id="websiteone.info_prices"> 
 
     <option data-price="11.29" value="1">1 Year</option> 
 
     <option data-price="11.29" value="2">2 Years</option> 
 
     <option data-price="11.29" value="3">3 Years</option> 
 
     <option data-price="11.29" value="4">4 Years</option> 
 
     <option data-price="11.29" value="5">5 Years</option> 
 
     <option data-price="11.29" value="6">6 Years</option> 
 
     <option data-price="11.29" value="7">7 Years</option> 
 
     <option data-price="11.29" value="8">8 Years</option> 
 
     <option data-price="11.29" value="9">9 Years</option> 
 
     <option data-price="11.29" value="10">10 Years</option> 
 
    </select> 
 
    </div> 
 
    <div class="col-lg-6"> 
 
    <select class="form-control" onchange="getPrice('websitetwo.info')" id="websitetwo.info_prices"> 
 
     <option data-price="11.29" value="1">1 Year</option> 
 
     <option data-price="11.29" value="2">2 Years</option> 
 
     <option data-price="11.29" value="3">3 Years</option> 
 
     <option data-price="11.29" value="4">4 Years</option> 
 
     <option data-price="11.29" value="5">5 Years</option> 
 
     <option data-price="11.29" value="6">6 Years</option> 
 
     <option data-price="11.29" value="7">7 Years</option> 
 
     <option data-price="11.29" value="8">8 Years</option> 
 
     <option data-price="11.29" value="9">9 Years</option> 
 
     <option data-price="11.29" value="10">10 Years</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-lg-6 alert alert-warning"><span id="websiteone.info_displayprice">test1</span> 
 
    </div> 
 
    <div class="col-lg-6 alert alert-warning"><span id="websitetwo.info_displayprice">test2</span> 
 
    </div> 
 
</div>

Answer 2

私はjQueryのソリューションjsfiddle

HTML検討したい：

<div class="row"> 
    <div class="col-lg-6"> 
    <select class="form-control webprice" myUrl="website_one" id="websiteone_select"> 
     <option data-price="11.29" value="1">1 Year</option> 
     <option data-price="11.29" value="2">2 Years</option> 
     <option data-price="11.29" value="3">3 Years</option> 
     <option data-price="11.29" value="4">4 Years</option> 
     <option data-price="11.29" value="5">5 Years</option> 
     <option data-price="11.29" value="6">6 Years</option> 
     <option data-price="11.29" value="7">7 Years</option> 
     <option data-price="11.29" value="8">8 Years</option> 
     <option data-price="11.29" value="9">9 Years</option> 
     <option data-price="11.29" value="10">10 Years</option> 
    </select> 
    </div> 
    <div class="col-lg-6"> 
    <select class="form-control webprice" myUrl="website_two" id="websitetwo_select"> 
     <option data-price="11.29" value="1">1 Year</option> 
     <option data-price="11.29" value="2">2 Years</option> 
     <option data-price="11.29" value="3">3 Years</option> 
     <option data-price="11.29" value="4">4 Years</option> 
     <option data-price="11.29" value="5">5 Years</option> 
     <option data-price="11.29" value="6">6 Years</option> 
     <option data-price="11.29" value="7">7 Years</option> 
     <option data-price="11.29" value="8">8 Years</option> 
     <option data-price="11.29" value="9">9 Years</option> 
     <option data-price="11.29" value="10">10 Years</option> 
    </select> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-lg-6 alert alert-warning"><span id="display_price">test1</span></div> 
</div> 

JS：

を3210

$(document).on("change", ".webprice", function(){ 

    // get all of the data we need to make calculations 
    yearPrice = Number($('option:selected', this).attr("data-price")); 
    years = Number($(this).val()); 
    finalPrice = Math.floor(yearPrice * years * 100)/100; 
    url = $(this).attr("myUrl"); 

    // display the final price 
    displayPrices = "The price for " + url + " over " + years + " years is $" + finalPrice; 
    $("#display_price").html(displayPrices); 

});