我是一个 A 型框架的初学者，试图在内部创建一个简单的计算器，但在将数字键制作成按钮时遇到困难，按下按钮时会在显示屏上显示按下的数字。下面是我的 html 和 js 代码片段。 html 包含显示屏幕和“第一”按钮。 Node.js 包含将在屏幕上显示填充数字的 javascript 代码。
//a frame
<a-scene>
<a-entity id ="display" position="0 2 -5" geometry="primitive: plane; height: 2; width: 5" material="color: teal"></a-entity>
<a-entity id = "NumberOne" position = "-2 0.5 -5" geometry = "primitive: plane; height: 1; width: 1" material = "color:black" text="color: white; align: center; value: 1; width: 5"></a-entity>
</a-scene>
//script
document.querySelector("#NumberOne").addEventListener('click', () => {
display.innerHTML += 1;
});
最佳答案
实际上，A-Frame构建了一个3D场景，而文本是一个网格对象，你不能改变HTML元素的内部HTML。您使用的text是A-Frame中的一个组件。它有一些属性，例如字体、值。您应该更新这些属性来更改元素。
click 事件上添加事件监听器。当您单击 NumberOne 元素时，我会获取该元素文本组件的值。并将其添加到 display 文本组件值中。然后，使用 setAttribute() 更新文本组件。
这是我的脚本:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add and display number</title>
<meta name="description" content="Add and display number with A-Frame">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.5.0/aframe.min.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('add-number', {
init: function () {
this.display = document.querySelector("#display");
this.el.addEventListener("click",this.onClick.bind(this));
},
onClick:function()
{
var num = parseInt(this.el.components.text.data.value);
var displayValue = parseInt(this.display.components.text.data.value);
var sum = displayValue+num;
this.display.setAttribute("text","value",sum.toString());
}
});
</script>
<a-scene>
<a-entity camera look-controls
position="0 1.764 0">
<a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;" material="color: #CCC; shader: flat;">
</a-entity>
</a-entity>
<a-entity id ="display" position="0 2 -5" geometry="primitive: plane; height: 2; width: 5" material="color: teal" text="color: white; align: center; value: 1; width: 5"></a-entity>
<a-entity id = "NumberOne" position = "-2 0.5 -5" geometry = "primitive: plane; height: 1; width: 1" material = "color:black" text="color: white; align: center; value: 1; width: 5" add-number></a-entity>
<a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue" position="-2 2.2 -1.5"></a-entity>
<!-- Lighting -->
<a-light type="ambient" color="#fff"></a-light>
</a-scene>
</body>
</html>关于javascript - A 型框架 : I am having trouble creating a button that displays a number on a plane，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42869964/