In a popup, change text in a span
Question
I was trying to add an external JavaScript file to my HTML for a practice Chrome extension. It has a slider whose value needs to be taken and sent back to a span tag on the popup.html , As I looked up I need to have a separate JavaScript file and create an onchange event listener to take the element and pass its value. But I cannot get the value to show on span tag. Please guide on what I am doing wrong.
This is the HTML (popup.html)
<!doctype html>
<html>
<head>
<title>Slide</title>
</head>
<body>
<input type="range" min="0" max="50" value="0" step="5" id="slider" />
<span id="range">0</span>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
And This is the JavaScript file (popup.js)
document.getElementById("slider").onchange = function() {showValue()};
function showValue()
{
var newValue = document.getElementById("slider");
var rng = document.getElementById("range");
rng.value = newValue.value;
}
1 answers
solution1
1 ACCPTED 2017-02-26 04:45:30
Everything is correct except one line in your popup.js file
Change
rng.value = newValue.value;
To
rng.textContent = newValue.value;
because you want change the text inside the tag.
document.getElementById("slider").onchange = function() {showValue()}; function showValue() { var newValue = document.getElementById("slider"); var rng = document.getElementById("range"); rng.textContent = newValue.value; }
<input type="range" min="0" max="50" value="0" step="5" id="slider" /> <span id="range">0</span>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.