Javascript 如何将输入值分配给span Id？_Javascript_Html

Javascript 如何将输入值分配给span Id？

javascript html

Javascript 如何将输入值分配给span Id？,javascript,html,Javascript,Html,下面是一个简单的程序，可以在图像函数上创建可拖动的文本。您能建议我从输入框中获取用户输入，并将其显示到（现在拖动）文本中，该文本可在此处拖动 <!DOCTYPE html> <html> <body> <input type="text" > <form> <select onchange="ChangeBackgroundFont(this,'font');" size="1"> <option v

下面是一个简单的程序，可以在图像函数上创建可拖动的文本。您能建议我从输入框中获取用户输入，并将其显示到（现在拖动）文本中，该文本可在此处拖动

<!DOCTYPE html>
<html>
<body>
<input type="text" >
<form>
   <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>
   <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>
   </select>
   <div id="draggable-element"> <span id="fontbackgroundTest" style="font-size-adjust: 0.6">Drag Me</span> </div>
</form>
<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 fontTest.style) {
                  fontTest.style.fontSizeAdjust = selectState;
              } else {
                  alert ("Your browser doesn't support this example!");
              }
            }else{
                document.getElementById("fontbackgroundTest").style.color = selectTag.value;
            }
        }
    </script> 
<img src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/> 
<script>
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) {
    selected.style.left = (x_pos - x_elem) + 'px';
    selected.style.top = (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() {
  _drag_init(this);
  return false;
};

document.onmousemove = _move_elem;
document.onmouseup = _destroy;
</script>
<style>
 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`) */
    }

</style>
</body>
</html>


0.1
0.25
0.5
0.75
1
1.25
1.5
1.75
2.
挑选
蓝色
绿色
白色
黑色
拖我
函数ChangeBackgroundFont（选择标记，类型）{
如果（类型==“字体”）{
//返回所选选项的索引
var whichSelected=selectTag.selectedIndex；
//返回选定的选项值
var-selectState=selectTag.options[所选内容]。文本；
var fontTest=document.getElementById（“fontbackgroundTest”）；
if（'fontSizeAdjust'在fontest.style中）{
fontTest.style.FontSizedJust=选择状态；
}否则{
警告（“您的浏览器不支持此示例！”）；
}
}否则{
document.getElementById（“fontbackgroundTest”）.style.color=selectTag.value；
}
}
var selected=null，//要移动的元素的对象
x_pos=0，
y_pos=0，//存储鼠标指针的x&y坐标
x_elem=0，
y_elem=0；//存储元素的顶部、左侧值（边）
//将在用户开始拖动元素时调用
函数拖动初始化（元素）{
//存储需要移动的元素的对象
所选=元素；
x_elem=x_pos-selected.offsetLeft；
y_elem=y_pos-selected.offsetTop；
}
//将在用户拖动元素时调用
功能移动元素（e）{
x_pos=document.all？window.event.clientX:e.pageX；
y_pos=document.all？window.event.clientY:e.pageY；
如果（已选择！==null）{
selected.style.left=（x_pos-x_elem）+'px'；
selected.style.top=（y_pos-y_elem）+“px”；
}
}
//完成后，请销毁该对象
函数_destroy（）{
选中=空；
}
//绑定函数。。。
document.getElementById（'draggable-element'）。onmousedown=function（）{
_拖动_init（此）；
返回false；
};
document.onmousemove=\u move\u elem；
document.onmouseup=\u销毁；
身体{
填充：10px
}
#可拖动元件{
宽度：100px；
高度：10px；
背景色：#；
颜色：黑色；
填充：10px 12px；
光标：移动；
位置：绝对位置；
/*重要信息（所有非“静态”的位置）*/
}

我知道这很简单，但找不到简单的方法来更改输入以反映在span id中。请帮助我完成此操作。

更改“输入”元素代码，如下所示

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

我添加了一个onchange事件，每当输入字段中的值发生变化时就会触发该事件。在这个onchange事件中，我获取了更新后的值，并将其设置为可拖动span元素的值

小提琴链接：

您可以在输入框中添加一个onkeyup事件……只要按下一个键，它就会更新span元素

范例

document.getElementById('input').onkeyup= function() {
document.getElementById('draggable-element').children[0].innerHTML=this.value;
}

片段

正文{
填充：10px
}
#可拖动元件{
宽度：100px；
高度：10px；
背景色：#；
颜色：黑色；
填充：10px 12px；
光标：移动；
位置：绝对位置；
/*重要信息（所有非“静态”的位置）*/
}


0.1
0.25
0.5
0.75
1
1.25
1.5
1.75
2.
挑选
蓝色
绿色
白色
黑色
拖我
函数ChangeBackgroundFont（选择标记，类型）{
如果（类型==“字体”）{
//返回所选选项的索引
var whichSelected=selectTag.selectedIndex；
//返回选定的选项值
var-selectState=selectTag.options[所选内容]。文本；
var fontTest=document.getElementById（“fontbackgroundTest”）；
if（'fontSizeAdjust'在fontest.style中）{
fontTest.style.FontSizedJust=选择状态；
}否则{
警告（“您的浏览器不支持此示例！”）；
}
}否则{
document.getElementById（“fontbackgroundTest”）.style.color=selectTag.value；
}
}
var selected=null，//要移动的元素的对象
x_pos=0，
y_pos=0，//存储鼠标指针的x&y坐标
x_elem=0，
y_elem=0；//存储元素的顶部、左侧值（边）
//将在用户开始拖动元素时调用
函数拖动初始化（元素）{
//存储需要移动的元素的对象
所选=元素；
x_elem=x_pos-selected.offsetLeft；
y_elem=y_pos-selected.offsetTop；
}
//将在用户拖动元素时调用
功能移动元素（e）{
x_pos=document.all？window.event.clientX:e.pageX；
y_pos=document.all？window.event.clientY:e.pageY；
如果（已选择！==null）{
selected.style.left=（x_pos-x_elem）+'px'；
selected.style.top=（y_pos-y_elem）+“px”；
}
}
//完成后，请销毁该对象
函数_destroy（）{
选中=空；
}
//绑定函数。。。
document.getElementById（'draggable-element'）。onmousedown=function（）{
_拖动_init（此）；
返回false；
};
document.onmousemove=\u move\u elem；
document.onmouseup=\u销毁；
document.getElementById（'input'）。onkeyup=function（）{
document.getElementById（'draggable-element'）。子项[0]。innerHTML=this.value；
}
身体{
填充：10px
}
#可拖动元件{
宽度：100px；
高度：10px；
背景色：#；
颜色：黑色；
填充：10px 12px；
光标：移动；
位置：绝对位置；
/*重要信息（所有非“静态”的位置）*/
}

你是说

拖动我

而不是