Javascript 单击时在可编辑div中设置的按钮值

我正在使用按钮标签

1

基本上我想当按下这个按钮时，按钮的值被设置为可编辑的div

按钮的值

客户端脚本可以这样做吗？

尝试以下代码：（编辑修改，因为用户随后表示将使用此脚本创建计算器）

我们正在做以下工作：

为按钮指定onclick功能。每当单击该按钮时，都会调用该函数

将ID添加到

按钮

标记和

div

标记中，以使用JavaScript中的

getElementById

方法访问它们

此.value

将当前单击的

按钮的
value
传递到函数

在JavaScript内部，我们获取按钮的值并将其设置为所需的

div

的

innerHTML

注意：由于使用了

+=

，它将获取

div

的当前内容，并将按钮的值附加到该内容上（例如，如果先按1，然后按2，则

div

将有12作为其内容）

HTML

<button value="1" id='btn1' onclick='setBtnValue(this.value);'>1</button>
<button value="2" id='btn2' onclick='setBtnValue(this.value);'>2</button>
<div contentEditable='true' id='div1'></div>

---

您可以使用getElementById方法

<button value="1" onclick="function1(this)">1</button>
<div contentEditable='true' id='edit'>value from button</div>

<script type='text/javascript'>
   function function1(obj){
      document.getElementById("edit").innerHTML=obj.value;
   }
</script>

1
来自按钮的值
功能1（obj）{
document.getElementById（“编辑”）.innerHTML=obj.value；
}

是，这是可能的，但您必须分配

id

<button onclick="put()" id="but" value="1">1</button>

<div id="pol" >Value from button</div>

HTML：

<button value="1" class="button">1</button>
<button value="2" class="button">2</button>
<div contentEditable="true" id="element"></div>

1
2.

JS:

var buttons=document.getElementsByClassName（'button'）；
var div=document.getElementById（'element'）；
对于（变量i=0；i

---

这就是您想要的吗？我的计划是制作计算器。这是全部帮助，但我希望在第一个和第二个之间留出一些空间，依此类推。作为下面所有答案的旁注。。。建议在2013年使用

onclick

应该是一个可以禁止的冒犯：）。感谢您的快速响应。我想在1和2之间留出一些空间，因为我想制作计算器。您知道我想使用div作为计算器屏幕。谢谢harry，您通过面糊解释节省了我的时间。总是很高兴能帮上忙，伙计：）。还可以查看ZenMaster答案中的

addEventListener

部分。这是将函数附加到按钮

单击事件的另一种方法，当您有很多这样的按钮时，它会派上用场。
function put()
{
document.getElementById("pol").innerHTML  = document.getElementById("but").value;
}

<button value="1" class="button">1</button>
<button value="2" class="button">2</button>
<div contentEditable="true" id="element"></div>

var buttons = document.getElementsByClassName('button');
var div = document.getElementById('element');

for(var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function(event) {
        div.innerHTML = event.target.value;
    });
}