时间戳

首页 > 解决方案 > 如何将 JavaScript 值传递到输入字段

javascript - 如何将 JavaScript 值传递到输入字段

问题描述

我做了移动范围按钮的代码，数量将增加跨度ID的值，我也是通过JavaScript做到的，但我尝试在输入字段中获取相同的值我不明白有什么问题请帮助我来解决这个问题。

var output = document.getElementById("demo");

document.getElementById("demo").value = output;

output.innerHTML = slider.value;

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

 output2.innerHTML = this.value;
}
<div class="col-md-12">
  <p>Loan Amount<span id="demo3"></span></p>
  <input type="range" min="5000" max="50000" value="1000" class="slider" id="myRange" step="1000">
</div>


<div class="col-md-12">
  <p>Loan Period</p>
  <input type="range" min="10" max="50" class="slider" id="myRange2" step="10" oninput="getInput(this.value)">
</div>


<div class="col-md-4">
  <img src="./assets/img/cal-01.png" style=" max-width: 48%; " />
  <p>Loan Amount:<br/><span id="demo"></span></p>
</div>

<div class="col-md-4">
  <img src="./assets/img/cal-02.png" style=" max-width: 37%; " />
  <p>Loan Period:<br/><span id="demo4"></span> Days</p>
</div>


<input type="text" class="form-control" id="demo" name="demo">

我想将跨度 ID 值传递给输入字段 ID

标签： javascripthtml

解决方案

首先，在 html 文档中没有两个元素应该具有相同的 id，因此您必须将其中一个 id 为“demo”的元素更改为唯一的。

然后用于.textContent获取 span 元素上的内容。

var output = document.getElementById("span-demo");  // this is the span element

document.getElementById("demo").value = output.textContent; // put the text context inside the value of the input element.

output.innerHTML = slider.value;

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

 output2.innerHTML = this.value;
}

推荐阅读