Divの要素を選択して最終金額を増やす

Question

昨日、問題を解決するためのヒント、特定の値を持つ入力による最終的な価格にどのように影響するかを知りました。この場合、divを直接使用して学習する必要があります。これは私が私がふふふ何か間違ったことをやっていると思う私の実際のコード

function totalIt() { 
 
    var input = document.getElementsByTagName("span"); 
 
    var total = 0; 
 
    for (var i = 0; i < input.length; i++) { 
 
    if (input[i].checked) { 
 
     total += parseFloat(input[i].value); 
 
    } 
 
    } 
 
    document.getElementById("no_selection").value = "$" + total.toFixed(2); 
 
    document.querySelector(".priceText1").innerText = "$" + total.toFixed(2); 
 
}

<div class="priceWrapper"> 
 
    <h3 class="priceText1" id="total">$0.00</h3> 
 
    <h3 class="priceText2">Final Cost</h3> 
 
</div> 
 

 
<div id="quotingArea2"> 
 

 
    <div class="item"> 
 
    <div class="itemProduct"> 
 
     <h4 class="itemText"> 
 
     <span class="no_selection">Logos</span> 
 
     </h4> 
 
    </div> 
 

 
    <div class="itemHidden"> 
 
     <div class="itemHiddenUnselected"> 
 
     <h4 class="itemText"> 
 
      <span class="no_selection">First Option</span> 
 
     </h4> 
 
     </div> 
 
     <div class="itemHiddenUnselected"> 
 
     <h4 class="itemText"> 
 
      <span class="no_selection">Second Option</span> 
 
     </h4> 
 
     </div> 
 
     <div class="itemHiddenUnselected"> 
 
     <h4 class="itemText"> 
 
      <span class="no_selection">Third Option</span> 
 
     </h4> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

です。誰かが私を助けることができる？

Answer 1

追加する価格が必要なので、価格を入力できるように入力を追加しました。予算に予算を含めるかどうかをチェックする必要があります。そして、最終価格を計算するためのボタンが必要です。

このようなものが考えられます。

function totalIt() { 
 
    var input = document.getElementsByTagName("h4"); 
 
    var total = 0; 
 
    for (var i = 0; i < input.length; i++) { 
 
    if (input[i].getElementsByTagName("span")[0].classList.contains('selected')) { 
 
     total += parseFloat(input[i].getElementsByTagName("input")[0].value); 
 
    } 
 
    } 
 
    document.getElementById("total").innerText = "$" + total.toFixed(2); 
 
} 
 

 
var spans = document.getElementsByTagName("span"); 
 
for (var i = 0; i< spans.length; i++){ 
 
    spans[i].addEventListener('click', function(){ 
 
     this.setAttribute("class", "selected"); 
 
     totalIt(); 
 
    }); 
 
}

.selected{ 
 
color:red; 
 
}

<div class="priceWrapper"> 
 
    <h3 class="priceText1" id="total">$0.00</h3> 
 
    <h3 class="priceText2">Final Cost</h3> 
 
</div> 
 

 
<div id="quotingArea2"> 
 

 
    <div class="item"> 
 
    <div class="itemProduct"> 
 
     <h4 class="itemText"> 
 
     <span class="no_selection">Logos</span> 
 
     <input class="money" value="300" type="hidden" /> 
 
     </h4> 
 
    </div> 
 

 
    <div class="itemHidden"> 
 
     <div class="itemHiddenUnselected"> 
 
     <h4 class="itemText"> 
 
      <span class="no_selection">First Option</span> 
 
      <input class="money" value="100" type="hidden" /> 
 
     </h4> 
 
     </div> 
 
     <div class="itemHiddenUnselected"> 
 
     <h4 class="itemText"> 
 
      <span class="no_selection">Second Option</span> 
 
      <input class="money" value="50" type="hidden" /> 
 
     </h4> 
 
     </div> 
 
     <div class="itemHiddenUnselected"> 
 
     <h4 class="itemText"> 
 
      <span class="no_selection">Third Option</span> 
 
      <input class="money" value="10" type="hidden" /> 
 
     </h4> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>