如何在TextArea中显示滑块值

Question

Hi I would like to display the sliders selected value displays in the text are when button is pressed.

The code needs to be pure javascript

i have manage to display the selected data in the console but i have no idea about how to display that data into text area.

 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

To do this you simply need to refer to your textbox in your javascript code.

You can do this by doing

document.getElementById('printerInstructions')

This will refer to your textbox/textarea in your HTML. Thus, to change its value, you can use its .value attribute and set it equal to the textsize .

See working example below:

 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> 

For "live" changes to your textbox as you slide you can add the oninput event to your slider to trigger your execute function everytime you slide your slider:

 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

Just equate the textarea value to the slider value

 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

This is in addition to the answers provided . If you need to see the change the moment it is updated, you can use event handler and update it.

 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>