javascriptaframewebvr

Set the value of a textArea Aframe to a variable

I'm wondering how using JavaScript, I can set the text="" value of a textArea in A-frame to a variable. For example, the textArea should start out with the default text value set to it, but I've created a variable called txtValue, what should happen is when the button is clicked at the top, the text will update to the value of the variable called txtValue. So the textarea text will change from the default text to whatever value txtValue is set to. How can this be done? Fiddle with code: https://jsfiddle.net/AidanYoung/9ma1j7gy/6/

Solution

  • You should originally set the Value attribute of your input property to be whatever you want it to be. lets say your variable: textValue. Then add an eventlistener to listen on on "change" event. alike:

    ------HTML
<label>Choose an ice cream flavor:
  <select class="ice-cream" name="ice-cream">
    <option value="">Select One …</option>
    <option value="chocolate">Chocolate</option>
    <option value="sardine">Sardine</option>
    <option value="vanilla">Vanilla</option>
  </select>
</label>
------------JS
<div class="result"></div>
const selectElement = document.querySelector('.ice-cream');

selectElement.addEventListener('change', (event) => {
  const result = document.querySelector('.result');
  result.textContent = `You like ${event.target.value}`;
});