在 href 中使用 javascript 变量出错了 - 为什么？

Question

有很多关于如何将 Javascript 变量放入 href 标签的问题和答案，但我运行遇到了一个似乎没有人遇到过的问题。

我有一个滑块，根据滑块设置的位置，应该将值纳入 href。

因此，如果滑块值为 50，则 link 应为 "http//testurl.de/50" 但是我总是回来“http://testurl.de/[object%20HTMLSpanElement]”并且不知道出了什么问题。

<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="ValueSlider">
  <p>Value: <span id="SetValue"></span></p>
</div>



<script>
  var slider = document.getElementById("ValueSlider");
  var output = document.getElementById("SetValue");
  output.innerHTML = slider.value;

  slider.oninput = function() {
  output.innerHTML = this.value;
  }

</script>



<a href="#" onclick="window.location='http://testurl.de/' + SetValue">link</a>

如有任何帮助，我们将不胜感激！ :) 最佳莫

Answer 1

您有两种方法可以解决此问题，实际上您已经在该代码上方几行处执行了这两种方法。

SetValue 是您的 span 元素的 ID，因此要从该元素获取数据，您可以使用 SetValue.innerHTML、SetValue.innerText 或其他几个。
或者，您可以只引用那里的输入元素（看起来您称之为 slider）并再次获取 slider.value。

<a href="#" onclick="window.location='http://testurl.de/' + SetValue.innerHTML">link</a>
// or
<a href="#" onclick="window.location='http://testurl.de/' + SetValue.innerText">link</a>
// or
<a href="#" onclick="window.location='http://testurl.de/' + SetValue.textContent">link</a>
// or
<a href="#" onclick="window.location='http://testurl.de/' + slider.value">link</a>

Answer 2

您应该在 link 上使用 output.innerHTML 而不是 SetValue，如下所示：

<a href="#"
   onclick="window.location='http://testurl.de/' + output.innerHTML">link
</a>

Answer 3

就是这样

const slider = document.getElementById("ValueSlider")
  ,   output = document.getElementById("SetValue")
  ,   aLink  = document.getElementById("SliderLink")
  ;
function SetSliderVal() {
  output.textContent = slider.value
  aLink.href         = 'http://testurl.de/'+slider.value
  aLink.textContent  = 'link = '+slider.value
}
SetSliderVal();

slider.oninput = SetSliderVal

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="ValueSlider">
  <p>Value: <span id="SetValue"></span></p>
</div>
  
<a href="#" id="SliderLink">link</a>

在 href 中使用 javascript 变量出错了 - 为什么？

use javascript variable in href went wrong - why?

html

javascript

variables

href