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

p5.js Coding Questions
1

Hi everyone,

Is there a way to access already existing HTML element defined in the .html page of a p5.js project? For instance, I’d like to be able to read the text value of an HTML input element. I know that the p5.dom library allows this. BUT apparently you have to create dynamically the HTML element being added to the DOM at the execution time. What I’m searching is how to get access (typically to read or set value) of an existing HTML element defined into the HTML file. Access to an already existing HTML element is a very basic operation in Javascript (typically document.getElementById(“elementID”).value).

Ok, just writing my question I’ve realized that it’s also possible into a p5.js code to write conventional Javascript code, using for instance .getElementById(),… That is a very good thing!

But Processing and p5.areis here to simplify thing for beginners. So if we coud avoid such ‘complicate code’ like 'document.getElementById(…).value, it would be great and in Processing spirit. But I dont find in the p5.dom library a statement like getElement() generating an p5.Element object linked to the existing HTML element and offering the possibility to manage this existing HTML element without creating dynamically before.

Wow, reading the reference I see the select() statement that could the equivalent to a getElement() mentioned above. I’m gonna try. If it is the case, would be great!

Thanks for attention :smile:

Laurent

1 Like
2

Yes, it works! Great! Thanks a lot to the development team of Processing and p5.js: fabulous tool :smile:

If you’re reading this basic question, maybe this very basic example could help (don’t forget importing p5.dom library) :

.html

<html>
<head>
  <meta charset="UTF-8">

  <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
  <script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
  <script language="javascript" type="text/javascript" src="libraries/p5.dom.js"></script>
  <script language="javascript" type="text/javascript" src="accountform.js"></script>
  <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->

  <!-- This line removes any default padding and style. 
       You might only need one of these values set. -->
  <style> body {padding: 0; margin: 0;} </style>
</head>

<body>
   
   <label>Username : </label><input id="username" type="text" value="Jackson" />
   

</body>
</html>

.js code

function setup() {
  
  var usernameField = select("#username");
  var username = usernameField.value();
  text(username, 10, 20);

}
2 Likes
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