将 JS 值传递给 HTML 以创建锚标记

Question

我正在尝试获取要传递给 a 标签的年份值，包括“#”，这样我就可以将滑块年份值用作 link 到 div 进一步在页面下方。

我需要更改什么？

var slider = document.getElementById("myRange");
var output = document.getElementById("year");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
}

document.getElementById("year").href = year;

<div class="slidecontainer">
  <input type="range" min="2009" max="2020" value="1" class="slider" id="myRange">
</div>

<a href="#" id="year">
</a>

Answer 1

将值分配给 oninput 事件处理程序中的 href 属性。

var slider = document.getElementById("myRange");
var output = document.getElementById("year");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
  output.href = '#' + this.value;
}

/* Display the current 'href' value for demo */
a::after {
  content: 'href=' attr(href);
  margin-left: 10px;
  font-size: .8em;
  color: #666;
}

<div class="slidecontainer">
  <input type="range" min="2009" max="2020" value="1" class="slider" id="myRange">
</div>

<a href="#" id="year">
</a>

Answer 2

您将 href 设置为未定义的 year（正如我在您的问题中看到的那样）。您可以在 oninput 函数中设置 output href。因此，您的代码将如下所示：

var slider = document.getElementById("myRange");
var output = document.getElementById("year");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
  output.href = '#' + this.value;
}

将 JS 值传递给 HTML 以创建锚标记

Passing JS value to HTML to create anchor tag

html

javascript

variables

anchor

slider