Ändern Sie den Text der Schaltfläche, ohne CSS-Stile zu ändern

Question

Ich bastle herum mit HTML und Javascript und habe ein Problem festgestellt.

Ich habe eine Schaltfläche, die bei Hover animiert und Text und Farbe beim Klicken ändert. Wenn Sie erneut klicken, wird wieder die gleiche Farbe und der gleiche Text angezeigt. Dies behandle ich mit einer JS-Datei.

Mein Problem ist, dass beim Klicken und Schweben zum ersten Mal alles gut funktioniert, aber nach dem ersten Klick sind die Animationen für immer verschwunden und die Schaltfläche ändert jetzt nur Farbe und Text, keine Hover-Animation ist da.

HTML-Code für die Schaltfläche:

<button class="button" style="vertical-align:middle" id="buttonclick" onclick="setColor()"> 
<span>Enable Control</span></button> 

diesen JSfiddle für vollständige Erklärung finden.

Answer 1

Ihre Erklärung ist ein bisschen vage und der Titel ist ein wenig verwirrend. Ich nehme an, dass Sie den gleichen Hover haben möchten, den Sie am Anfang hatten (wenn Sie den Knopf drücken und zurück zu Blau gehen, muss der Hover wieder erscheinen). Ich werde es fix:

Das Problem ist, dass Sie den Span-Tag auf Ihrer Codezeile sind zu vermeiden:

property.innerHTML = "Enable control" 

Sie sollten es ändern:

property.innerHTML = "<span>Enable control</span>" 

Das gleiche gilt in den anderen Teil:

property.innerHTML = "<span>Disable control</span>" 

Ersetzen Sie Ihren JavaScript-Code mit diesem festgelegt:

var count = 1; 

function setColor() { 
    var property = document.getElementById('buttonclick'); 
    if (count == 0) { 
    property.style.backgroundColor = "#4f8ff7" 
    property.innerHTML = "<span>Enable control</span>" 
    alert("Disabled"); 
    count = 1; 
    } else { 
    property.style.backgroundColor = "#a84237" 
    property.innerHTML = "<span>Disable control</span>" 
    alert("Enabled"); 
    count = 0; 
    } 
} 

Answer 2

Sie ändern innerHtml der Schaltfläche. Das ersetzt Ihr span-Element durch Text.

Überprüfen Sie Ihre aktualisierte jsFiddle.