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

Question

there are many Questions and Answers out there for how to get a Javascript Variable into the href tag, but I am running into a Problem which no one seems to have.

I have a slider and depending on what position the slider is set, the value should be taken into the href.

So if the sliders value is 50 the link should be "http//testurl.de/50" However I get always back " http://testurl.de/[object%20HTMLSpanElement] " And don't know what's wrong.

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

Any help would be much appreciated! :) Best Mo

Answer 1

You have two ways to fix this, and you actually do them both already a few lines above that code.

• SetValue is the ID of your span element, so to get the data from that element, you can use SetValue.innerHTML , SetValue.innerText or a few others.
• Or, you can just reference the input element you have there (looks like you call it slider ) and grab slider.value again.

---

<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

You should use output.innerHTML and not SetValue on the link, as bellow:

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

Answer 3

simply this

 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>