использование переменной javascript в href пошло не так - почему? - PullRequest
Новая
       9

использование переменной javascript в href пошло не так - почему?

0 голосов
/ 19 января 2020

Есть много Вопросов и Ответов о том, как получить переменную 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>

Любая помощь будет принята с благодарностью! :) Лучший Мо

Ответы [ 3 ]

0 голосов
/ 19 января 2020

Вы должны использовать output.inner HTML, а не SetValue на ссылке, как показано ниже: 

<a href="#"
   onclick="window.location='http://testurl.de/' + output.innerHTML">link
</a>
0 голосов
/ 19 января 2020

просто это 

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>
0 голосов
/ 19 января 2020

У вас есть два способа исправить это, и вы на самом деле делаете их оба на несколько строк выше этого кода.

  • SetValue - это идентификатор вашего элемента span, поэтому для получения данных из этого элемента вы можете использовать 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>
...