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

Question

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

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

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

客户端脚本有可能吗？

Answer 1

试试下面的代码：（编辑修改为用户随后表示他将使用它来创建一个计算器）

我们正在做以下事情：

1. 为按钮分配一个 onclick 函数。每当单击按钮时都会调用它。
2. button标记和标记都添加了一个 ID，以使用JavaScriptdiv中的方法访问它们。getElementById
3. this.value会将当前单击value的button传递给函数。
4. 在 JavaScript 中，我们获取按钮的值并将其设置为innerHTMLrequired的值div。注意：由于+=使用了，它将获取 的当前内容div并将按钮的值附加到它（例如，如果按 1 后按 2，则div12 作为其内容）。

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>

Javascript

function setBtnValue(btnVal){
    document.getElementById('div1').innerHTML += btnVal;
}

演示

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

演示

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

工作示例。