在弹出窗口中，更改范围内的文本

Question

我试图将外部 JavaScript 文件添加到我的 HTML 以练习 Chrome 扩展。它有一个滑块，需要获取其值并将其发送回 popup.html 上的 span 标记，当我查找时，我需要一个单独的 JavaScript 文件并创建一个 onchange 事件侦听器来获取元素并传递其值。但我无法获得在 span 标签上显示的值。请指导我做错了什么。

这是 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>

这是 JavaScript 文件 (popup.js)

 document.getElementById("slider").onchange = function() {showValue()};


 function showValue()
 { 
    var newValue = document.getElementById("slider");
    var rng = document.getElementById("range");
    rng.value = newValue.value;
 }

Answer 1

除了你的 popup.js 文件中的一行

之外，一切都是正确的

改变

rng.value = newValue.value;

到

rng.textContent = newValue.value;

因为您想更改标签内的文本。

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>

在弹出窗口中，更改范围内的文本

In a popup, change text in a span

html

javascript

google-chrome

onchange

google-chrome-extension