在href中使用JavaScript变量出错，求原因及解决办法

嘿，我来帮你搞定这个小问题！

问题原因 #

你在链接的onclick事件里直接使用SetValue，这实际上是引用了页面上id为SetValue的<span>元素对象，而不是它里面的数值内容。当你把这个元素对象和字符串拼接时，JavaScript会把它转换成字符串形式[object HTMLSpanElement]，最终就出现了你看到的http://testurl.de/[object%20HTMLSpanElement]。

解决方案 #

这里有几种靠谱的解决方式，推荐第二种，因为它直接从数据源（滑块）获取值，更准确：

• 方案1：获取span元素的文本内容
  修改链接的onclick代码，明确获取span里的文本：

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

• 方案2：直接使用滑块的当前值（更推荐）
  既然滑块是数值的源头，直接取滑块的value属性会更可靠，不用依赖span的内容：

<a href="#" onclick="window.location='http://testurl.de/' + document.getElementById('ValueSlider').value">link</a>

• 进阶：避免内联事件（更规范的写法）
  如果想让代码更易维护，建议把事件处理逻辑放到script标签里，而不是内联在html中：

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

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

output.innerHTML = slider.value;

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

// 给链接添加点击事件
sliderLink.addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认的跳转行为
  window.location = 'http://testurl.de/' + slider.value;
});
</script>

这种写法把HTML和JavaScript逻辑分离，后期修改起来更方便。

内容的提问来源于stack exchange，提问作者wildcard