I Am unable to retrieve the text from the textarea as I just want to scale a box by typing the x-factor as the input. But the input is not being retrieved for some reason. Please help!...here is the code:
<html>
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-textarea-component/dist/aframe-textarea-component.min.js"></script>
</head>
<body>
<a-scene>
<a-sky color="#6EBAA7"></a-sky>
<a-box id="redbox" position="3 2.5 -2" color="red"></a-box>
<a-entity position="0 1 -2" id="inputText" textarea="backgroundColor:white; color:black; cols:5; rows:1;value:2;"></a-entity>
<a-input postion="0 2 -2"></a-input>
<a-text id="outputText" position="0 2 -2" value="Hello"></a-text>
<a-camera position="0 1 1">
<a-cursor color="yellow"></a-cursor>
</a-camera>
<a-entity id="select-button" geometry="primitive: box" material="color:red" position="0 0 -2"></a>
</a-scene>
<script>
var box = document.querySelector('#redbox')
var printText = document.querySelector('#inputText');
document.querySelector('#select-button').addEventListener('click',function(){
box.setAttribute("scale",
{
x : parseInt(printText.getAttribute('textarea').value),
y : 1.5,
z : 1.5
}
);
});
</script>
</body>
</html>
Edit: I tried changing the code in javascript as follows:
parseInt(printText.getAttribute('textarea').text
It still does not work!!
The textarea component does not expose the value directly but you can do:
document.querySelector('#inputText').components.textarea.textarea.value