Verständnisproblem bei der Funktionsweise von <meter>

[Auge]

Hallo

Ich habe in Problem mit den Farbwechseln des meter-Elements. Das meter ist mit so ziemlich allen möglichen Attributen erstellt worden, sein Attribut value wird per JavaScript befüllt. Zusätzlich wird ein dabeistehendes output mit dem selben Zahlenwert, der in des meters value reinkommt, befüllt. Die Balkenlänge passt sich korrekt an die sich ändernden Werte des value-Attributs an.

So weit, so gut. Aber: Die Farbänderungen „spinnen“.

Das meter verhielt sich beim ersten Aufruf und experimentieren so, wie ich es erwartet habe. Werte (in value) zwischen min und low ergeben einen grünen Balken, Werte zwischen low und high ergeben einen gelben Balken und Werte > high führen zu einem roten Balken.

Nach Neuaufrufen der Seite führen alle Werte, die nicht größer als der Wert von high sind zu einem grünen Balken und alle Werte darüber zu einem gelben Balken. Damit könnte ich, abseits des Verständnisproblems wegen des unterschiedlichen Verhaltens, leben, wenn nicht auch Werte jenseits des angegebenen max-Werts „nur“ zu einem gelben Balken führten. Solche Werte gehören, zumindest nach meinem Verständnis, als Balken in rot dargestellt.

Was mache oder verstehe ich hier falsch?

<li id="field-message">
 <label for="message">Nachricht</label>
 <textarea id="message" name="message" required></textarea>
 <p id="char-counter">
  <output id="progress-value">0</output>
  <meter id="progress-bar" min="0" low="69" optimum="139" high="150" max="160" value=""></meter>
 </p>
</li>

function countChars() {
	var txtarea = document.getElementById('message');
	var meterbar = document.getElementById('progress-bar');
	var textlen = txtarea.value.length;
	//console.log(textlen);
	meterbar.value = textlen;
	meterbar.textContent = textlen + ' Zeichen';
	document.getElementById('progress-value').textContent = textlen;
}

document.addEventListener('DOMContentLoaded', function() {
	// Zeichen einer bei Aufruf nicht leeren Textarea zählen
	countChars();
	// Zeichen einer Textarea nach Eingaben zählen
	document.getElementById('message').addEventListener('keyup', countChars);
});

Tschö, Auge