Question

您好，我想显示在按钮按下时文本中显示的滑块选择值。

代码必须是纯JavaScript

我设法在控制台中显示选定的数据，但是我不知道如何将这些数据显示在文本区域中。

function execute() {
  var textsize = document.getElementById("myRange").value;
  console.log(textsize);
}

<button type="button" onclick="execute();">Button</button>
<div id="textsizeslider" class="slidecontainer">
  Text Size: <input type="range" min="10" max="40" value="20" class="slider" id="myRange">
</div>
<textarea name="printerInstructions" id="printerInstructions" rows="8"></textarea>

Answer 1

为此，您只需要在javascript代码中引用文本框即可。

您可以通过

完成此操作

document.getElementById('printerInstructions')

这将引用HTML中的文本框/文本区域。因此，要更改其值，可以使用其.value属性并将其设置为等于textsize。

请参见下面的工作示例：

function execute() {
  var textsize = document.getElementById("myRange").value;
  document.getElementById('printerInstructions').value = textsize;
}

<button type="button" onclick="execute();">Button</button> </div>

<div id="textsizeslider" class="slidecontainer">
  Text Size: <input type="range" min="10" max="40" value="20" class="slider" id="myRange">
</div>

<textarea name="printerInstructions" id="printerInstructions" rows="8"></textarea>

要在滑动时对文本框进行“实时”更改，可以在滑块上添加oninput事件，以在每次滑动滑块时触发execute功能：

function execute(textsize) {
  document.getElementById('printerInstructions').value = textsize;
}

<div id="textsizeslider" class="slidecontainer">
  Text Size: <input oninput="execute(this.value)" type="range" min="10" max="40" value="20" class="slider" id="myRange">
</div>

<textarea name="printerInstructions" id="printerInstructions" rows="8"></textarea>

Answer 2

只需将textarea值等于滑块值

function execute()
    { 
var textsize = document.getElementById("myRange").value;
document.getElementById("printerInstructions").value=textsize
}

<button type="button" onclick="execute();">Button</button> </div>


 <div id="textsizeslider" class="slidecontainer">

            Text Size: <input type="range" min="10" max="40" value="20" class="slider" id="myRange">
      </div>

  <textarea name="printerInstructions" id="printerInstructions" rows="8">

    </textarea>

Answer 3

这是对answers provided的补充。如果您需要在更新时立即查看更改，则可以使用事件处理程序进行更新。

document.getElementById('printerInstructions').value = document.getElementById("myRange").value;
document.getElementById("myRange").addEventListener('change', () => {
  document.getElementById('printerInstructions').value = document.getElementById("myRange").value;
});

<div id="textsizeslider" class="slidecontainer">
  Text Size: <input type="range" min="10" max="40" value="20" class="slider" id="myRange">
</div>
<textarea name="printerInstructions" id="printerInstructions" rows="8"></textarea>

如何在TextArea中显示滑块值

3 个答案: