Question

我正在使用按钮标记<button value="1">1</button>

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

<div contentEditable='true'; >Value from button</div>

客户端脚本可以实现吗？

Answer 1

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

我们正在做以下事情：

为按钮指定onclick功能。只要单击该按钮，就会调用此方法。
我们会在button标记和div标记中添加ID，以便使用JavaScript中的getElementById方法访问它们。
this.value会将当前点击的value button传递给该函数。
在JavaScript中，我们获取按钮的值并将其设置为所需innerHTML的{{1}}。 注意：由于使用了div，它会占用+=的当前内容，并将按钮的值附加到它上面（例如，如果按下1后跟2，则div将有12个内容）。

<强> HTML

div

<强>的Javascript

<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>

Demo

Answer 2

你可以使用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>

Answer 3

是的，这是可能的，但您必须指定id。

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

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

现在使用功能

function put()
{
document.getElementById("pol").innerHTML  = document.getElementById("but").value;
}

DEMO

Answer 4

HTML：

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

JS：

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;
    });
}

Working example.

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

4 个答案: