javascriptでhtml出力を変更するには？

-2

この質問には既にお答えいただきましたことを心からお詫び申し上げますが、これにはかなり新しいので、オンラインで回答を見つけることができませんでした...javascriptでhtml出力を変更するには？

私はhtmlでjavascriptを使用することについて学んでいます。 htmlはユーザの入力内容に応じて出力されます。このように気にいら：

<!DOCTYPE html> 
<html> 

<script> 
function showCost() { 
    var registrationJS = document.forms["myForm"]["registration"].value; 
    var adsJS = document.forms["myForm"]["ads"].value; 
    var cost = 0; 
    if (registrationJS == "premium") { 
     cost += 50; 
    } 
    if (ads == "yes") { 
     cost += 2; 
    } 
    cost = '$'+cost; 
    document.write(cost); 
} 
</script> 

<head> 
</head> 

<body> 
<form name="myForm" method="post"> 
Registration:<select id="registration"> 
    <option value="premium">Premium</option> 
    <option value="free">Free</option> 
</select> 

Pay to get rid of ads?<br> 
<input type="radio" id="ads" value="yes">Yes<br> 
<input type="radio" id="ads" value="no">No<br> 

Cost: <-- display cost --> 
<script>showCost(); <-- ???? --> </script> 
</form> 
</body> 
</html>

は基本的に、どのように私はそれが私はそれが新しいコストを表示する出力の1つを変更するたびに更新されますので、コストを表示し、どのように私はそれを作ることができますすることができますか？

Btw私がそれをプレミアムにしてからフリーにすると、元に戻ってきません。私はちょうどhtmlの部分と構文の基本を取得しようとしています...ありがとう！、

Cost: <div id = "cost"></div>

し、代わりにdocument.write（コスト）の機能におけるユーザ入力の使用に適したイベントハンドラで更新する

document.getElementById('cost').innerHTML = cost;

の操作を行います：:)

出典

2016-04-02 Viliami Mahe

、これまで何をやる、それは、 'のonblur = ...'や 'のonchange = ... 'のように、インラインスクリプトを使用して起動しません。私がどのように示されたかを維持するのがずっと強力で簡単です。 – LGSon

はdiv要素を作るEvents

出典

2016-04-02 10:17:23 boomcode

お返事ありがとうございます... のようなものがありますか？ –

いいえ、あなたは変更の選択の値を取得し、ロジックを作成する必要があります。 [Onchange Link]（http://www.w3schools.com/jsref/event_onchange.asp） – boomcode

ここでは、イベントリスナーを使用して行うことのできる方法の1つです。あなたのための答えを投稿

(function(sel,inp) { 
 

 
    function showCost() { 
 

 
    var cost = 0; 
 

 
    if (sel.value == "premium") { 
 
     cost += 50; 
 
    } 
 
    if (inp[0].checked) { 
 
     cost += 2; 
 
    } 
 
    cost = '$'+cost; 
 
    document.getElementById('cost').textContent = cost; 
 
    } 
 
    
 
    showCost(); 
 

 
    sel.addEventListener('change', function(e) { 
 
    showCost(e); 
 
    }) 
 

 
    for (var i = 0; i < inp.length; i++) { 
 
    inp[i].addEventListener('click', function(e) { 
 
     showCost(e); 
 
    }) 
 
    } 
 

 
})(document.querySelector('.registration'),document.querySelectorAll('input'));

<form name="myForm" method="post"> 
 
Registration:<select class="registration"> 
 
    <option value="premium">Premium</option> 
 
    <option selected value="free">Free</option> 
 
</select> 
 
<br> 
 
Pay to get rid of ads?<br> 
 
<input type="radio" name="ads" value="yes">Yes<br> 
 
<input type="radio" name="ads" checked value="no">No<br> 
 

 
Cost:<span id="cost"></span> 
 

 
</form>

出典

2016-04-02 10:39:00 LGSon

javascriptでhtml出力を変更するには？

答えて

関連する問題