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

【问题标题】：use javascript variable in href went wrong - why?在 href 中使用 javascript 变量出错了 - 为什么？
【发布时间】：2020-05-05 11:23:53
【问题描述】：

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

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

因此，如果滑块值为 50，则链接应为“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>

任何帮助将不胜感激！ :) 最佳钼

【问题讨论】：

标签： javascript html variables href

【解决方案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>

【讨论】：

感谢 Deryck，这对我很有用。我选择再次抓取slider.value。

【解决方案2】：

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

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

【讨论】：

【解决方案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>

【讨论】：