Venkadesh S Venkadesh S - 4 years ago 253
HTML Question

how to assign input value to span Id?

Here is the simple program to create draggable text on Image function. can you suggest me to get user input from input box and shown it to (Drag Now) Text which is draggable here.

<!DOCTYPE html>
<input type="text" >
<select onchange="ChangeBackgroundFont(this,'font');" size="1">
<option value="0.1">0.1</option>
<option value="0.25">0.25</option>
<option value="0.5">0.5</option>
<option value="0.75">0.75</option>
<option selected="1.0">1.0</option>
<option value="1.25">1.25</option>
<option value="1.5">1.5</option>
<option value="1.75">1.75</option>
<option value="2">2</option>
<select name="color" type="text" onchange="ChangeBackgroundFont(this,'background');" >
<option value="select">Select</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="white">White</option>
<option value="black">Black</option>

<div id="draggable-element">
<span id="fontbackgroundTest" style="font-size-adjust: 0.6">Drag Me</span>
<script type="text/javascript">
function ChangeBackgroundFont (selectTag,type) {
if(type=="font") {
// Returns the index of the selected option
var whichSelected = selectTag.selectedIndex;
// Returns the selected options values
var selectState = selectTag.options[whichSelected].text;
var fontTest = document.getElementById ("fontbackgroundTest");
if ('fontSizeAdjust' in { = selectState;
} else {
alert ("Your browser doesn't support this example!");
document.getElementById("fontbackgroundTest").style.color = selectTag.value;
<img src=""/>

var selected = null, // Object of the element to be moved
x_pos = 0,
y_pos = 0, // Stores x & y coordinates of the mouse pointer
x_elem = 0,
y_elem = 0; // Stores top, left values (edge) of the element

// Will be called when user starts dragging an element
function _drag_init(elem) {
// Store the object of the element which needs to be moved
selected = elem;
x_elem = x_pos - selected.offsetLeft;
y_elem = y_pos - selected.offsetTop;

// Will be called when user dragging an element
function _move_elem(e) {
x_pos = document.all ? window.event.clientX : e.pageX;
y_pos = document.all ? window.event.clientY : e.pageY;
if (selected !== null) { = (x_pos - x_elem) + 'px'; = (y_pos - y_elem) + 'px';

// Destroy the object when we are done
function _destroy() {
selected = null;

// Bind the functions...
document.getElementById('draggable-element').onmousedown = function() {
return false;

document.onmousemove = _move_elem;
document.onmouseup = _destroy;
body {
padding: 10px

#draggable-element {
width: 100px;
height: 10px;
background-color: #;
color: black;
padding: 10px 12px;
cursor: move;
position: absolute;
/* important (all position that's not `static`) */


I know its easy but couldnt find the easy way to change input to reflect it in span id. pls help me to do it.

Answer Source

Change your "input" element code as below.

<input type="text" id="draggablevalue" onchange="document.getElementById('fontbackgroundTest').innerHTML  = document.getElementById('draggablevalue').value;">

I have added an onchange event which gets triggered whenever there is a value change in the input field. Within this onchange event, i have fetched the updated value and set it as the value of the draggable span element.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download