[SOLVED] Accessing html elements defined into .html file?

p5.js Coding Questions
3

Great, thank you, it helped me.
I added a html submit button associated with a function() : it behaves more like a formular now.
and I added a createDiv so that the data can also be retrieve in html.

  • code
<!DOCTYPE html>
<head>
  <meta charset="UTF-8">

  <script defer src=https://cdn.JsDelivr.net/npm/p5></script>
  <script defer src=https://cdn.JsDelivr.net/npm/p5/lib/addons/p5.dom.min.js> </script> 
  <script language="javascript" type="text/javascript">
  
  var canvas, txt, txtData;

  function setup() {
    canvas = createCanvas(300, 100);
    canvas.position(300, 50);    
  }

  function showData(){
    txtData = select("#txtData").value();
    removeElements(); 
    txt = createDiv(txtData);
    txt.position(20,50);
  }

  function draw(){
    background(200);
    text(txtData, 10, 20);
  }

  </script>
</head>
<body>
   <input id="txtData" type="text" placeholder="Enter here some text" />
   <input type="submit" value="Submit" onclick="showData()">
   <hr style="margin-bottom: 20px;">
</body>
</html>
  • Result

Screenshot_2018-08-21%20Screenshot

1 Like