Wie HTML-Ausgabe über Javascript ändern?

-2

Ich entschuldige mich aufrichtig, wenn diese Frage bereits gestellt wurde, aber ich bin ziemlich neu dazu und konnte die Antwort online nicht finden ...Wie HTML-Ausgabe über Javascript ändern?

Ich lerne über die Verwendung von Javascript mit HTML und ich versuche, das zu ändern HTML-Ausgabe, je nachdem, was der Benutzer eingibt. Somthing wie folgt aus:

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

Grundsätzlich, wie kann ich die Kosten machen anzuzeigen, und wie kann ich es so aktualisiert es jedes Mal, wenn ich einer der Ausgänge ändern wird die neuen Kosten an?

Btw Ich bin mir bewusst, dass, wenn ich es Prämie mache und dann frei es nicht wieder runter geht Ich versuche nur, die Grundlagen des HTML-Teils und der Syntax zu bekommen ... Danke! :)

Quelle

2016-04-02 Viliami Mahe

eine Antwort für Sie Posted, und was auch immer tun Sie, nicht anfangen, Inline-Skript verwenden, wie 'onblur = ...' oder 'onchange = ...', es ist so viel stärker und einfacher zu pflegen, wie ich gezeigt habe. – LGSon

ein div machen:

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

und in der Funktion anstelle von document.write (Kosten), tun

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

mit Benutzereingabe Verwendung geeigneter Ereignishandler zu aktualisieren: Events

Quelle

2016-04-02 10:17:23 boomcode

Vielen Dank für Ihre Antwort ... also würde etwas wie funktionieren? –

Nein. Sie müssen den Wert der Auswahl bei Änderung erhalten und dann eine Logik erstellen. [Link zum Wechseln] (http://www.w3schools.com/jsref/event_onchange.asp) – boomcode

Hier ist eine Möglichkeit, die Sie verwenden können, mit Ereignis-Listener.

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

Quelle

2016-04-02 10:39:00 LGSon

Wie HTML-Ausgabe über Javascript ändern?

Antwort

Verwandte Themen