Den Wert einer Textfolge ändern

Ich habe einen Fortschrittsbalken, den ich erstellt habe, und im Moment hänge ich nur einen Fortschrittswert an den Tag <h1> an. Was ich erreichen möchte, ist, den alten Wert durch den neuen zu ersetzen. Ich bin nicht sicher, ob es ein reserviertes Wort gibt, das ich verwenden könnte, um den Wert oder etwas Ähnliches zu aktualisieren. Irgendwelche Hilfe oder Stoß in die richtige Richtung würden sehr geschätzt.Den Wert einer Textfolge ändern

Danke!

Dies ist, was ich bisher:

const button = document.getElementById("btn"); 
 
const bar = document.getElementById("progress-bar"); 
 
const heading = document.getElementById("visual-progress"); 
 

 
button.addEventListener('click', function(){ 
 
    if(bar.value >= 100) { 
 
    bar.value=100; 
 
    } else { 
 
    bar.value+=25; 
 
    } 
 
    document.getElementById("visual-progress").append(bar.value); 
 
});

body { 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
    margin-top: 3em; 
 
} 
 

 
progress { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
      appearance: none; 
 
    width: 100%; 
 
    height: 20px; 
 
    -webkit-transition: all 5s; 
 
    transition: all 5s; 
 
} 
 

 
progress::-webkit-progress-bar { 
 
    background-color: #ccc; 
 
    width: 100%; 
 
} 
 

 
progress::-webkit-progress-value { 
 
    background-color: orange !important; 
 
} 
 

 
button { 
 
    margin-top: 2em; 
 
    background: black; 
 
    color: white; 
 
    border: none; 
 
    padding: .5em 2em; 
 
} 
 
button:hover { 
 
    background: #1a1a1a; 
 
} 
 

 
.hide { 
 
    display: none; 
 
}

<body> 
 
    <h2 id='visual-progress'>Quiz Progress</h2> 
 
    <progress id='progress-bar' max='100' value='0'></progress> 
 
    <button id='btn'>Next</button> 
 
</body>

Quelle

2017-10-19 ThomasBrushel

ändern .append(bar.value);-.innerHTML = bar.value;.

const button = document.getElementById("btn"); 
 
const bar = document.getElementById("progress-bar"); 
 
const heading = document.getElementById("visual-progress"); 
 

 
button.addEventListener('click', function(){ 
 
    if(bar.value >= 100) { 
 
    bar.value=100; 
 
    } else { 
 
    bar.value+=25; 
 
    } 
 
    document.getElementById("progress").innerHTML = bar.value; 
 
});

body { 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
    margin-top: 3em; 
 
} 
 

 
progress { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
      appearance: none; 
 
    width: 100%; 
 
    height: 20px; 
 
    -webkit-transition: all 5s; 
 
    transition: all 5s; 
 
} 
 

 
progress::-webkit-progress-bar { 
 
    background-color: #ccc; 
 
    width: 100%; 
 
} 
 

 
progress::-webkit-progress-value { 
 
    background-color: orange !important; 
 
} 
 

 
button { 
 
    margin-top: 2em; 
 
    background: black; 
 
    color: white; 
 
    border: none; 
 
    padding: .5em 2em; 
 
} 
 
button:hover { 
 
    background: #1a1a1a; 
 
} 
 

 
.hide { 
 
    display: none; 
 
}

<body> 
 
    <h2 id='visual-progress'>Quiz Progress <span id="progress">0</span>%</h2> 
 
    <progress id='progress-bar' max='100' value='0'></progress> 
 
    <button id='btn'>Next</button> 
 
</body>

Quelle

2017-10-19 14:27:55

können Sie .innerHTML anstelle von .append()

const button = document.getElementById("btn"); 
 
const bar = document.getElementById("progress-bar"); 
 
const heading = document.getElementById("visual-progress"); 
 

 
button.addEventListener('click', function(){ 
 
    if(bar.value >= 100) { 
 
    bar.value=100; 
 
    } else { 
 
    bar.value+=25; 
 
    } 
 
    document.getElementById("visual-progress").innerHTML = bar.value + "%"; 
 
});

body { 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
    margin-top: 3em; 
 
} 
 

 
progress { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
      appearance: none; 
 
    width: 100%; 
 
    height: 20px; 
 
    -webkit-transition: all 5s; 
 
    transition: all 5s; 
 
} 
 

 
progress::-webkit-progress-bar { 
 
    background-color: #ccc; 
 
    width: 100%; 
 
} 
 

 
progress::-webkit-progress-value { 
 
    background-color: orange !important; 
 
} 
 

 
button { 
 
    margin-top: 2em; 
 
    background: black; 
 
    color: white; 
 
    border: none; 
 
    padding: .5em 2em; 
 
} 
 
button:hover { 
 
    background: #1a1a1a; 
 
} 
 

 
.hide { 
 
    display: none; 
 
}

<body> 
 
    <h2 id='visual-progress'>Quiz Progress</h2> 
 
    <progress id='progress-bar' max='100' value='0'></progress> 
 
    <button id='btn'>Next</button> 
 
</body>

Quelle

2017-10-19 14:28:01 guest271314

Verwenden Sie eine lokale Variable den Anfangswert und .innerHTML den Zugriff speichern/überschreiben Sie den Text :

let initialValue = document.getElementById("visual-progress").innerHTML; 

button.addEventListener('click', function(){ 
    if(bar.value >= 100) { 
    bar.value=100; 
    } else { 
    bar.value+=25; 
    } 
    var newValue = initialValue + ' ' + bar.value; 
    document.getElementById("visual-progress").innerHTML = newValue; 
});

Quelle

2017-10-19 14:29:03 dhilt

Gibt es einen Grund, hilft, die Sie schlagen vor, anstelle der "visual-progress" Text (und unter Verwendung eines macht extra Variable, die scheinbar keinen Grund hat) anstatt den "Fortschrittsbalken" -Text zu ersetzen? –

Er wollte unbedingt, dass der Text "visual-progress" geändert wird. So habe ich die Anforderungen verstanden und es sieht so aus, als hätte ich recht. Dies folgt auch aus seinem Schnipsel ... – dhilt

Ich würde den aktuellen Text löschen und durch den gewünschten Text ersetzen. Könnte so etwas wie folgt aussehen:

var thisInfo = document.getElementById("visual-progress").innerHtml.Remove(); 
thisInfo = bar.value;

Oder vielleicht besser, nur die Innerhtml Ihres div auf den neuen Wert zuweisen, ohne dass die Funktion remove. Sollte genauso funktionieren.

var thisInfo = document.getElementById("visual-progress").innerHtml = bar.value;

Hope it

Quelle

2017-10-19 14:31:49 JakeofSpades

Verwendung .innerHTML statt auf seine Frage im Zusammenhang .append() .like document.getElementById("visual-progress").innerHTML = bar.value + "%";

Quelle

2017-10-19 14:40:56

Den Wert einer Textfolge ändern

Antwort

Verwandte Themen