Perchance - Create a Random Text Generator @lemmy.world animewatcher @lemmy.world 5mo ago

[Help] Trying to use lists (dict with (Key=value) pair) as select options set for HTML editor

I am new to this perchance ai image generation, I am trying to experiment, my requirement is like , I am using html editor for css and ui/ux looks and feels and I am using list editor as backend data storage for my input drop-down options.

-----------------------------In List editor ----------------------

I am trying to do define dd1_data (drop-down options). I just followed the examples from different generators

Dd1_data
    Option1= selected option 1
    Option2 = selected option 2

-----------------------------In HTML editor ----------------------

I am trying to reference the above mentioned drop-down details in html editor. I tried alert method which gives me object datatype for dd1_data with no data. Am I missing something?

<select>Dd1_data</select>

Please help me. My question might be dumb , please help me out as a fellow member of culture 🫠

6 comments

Your post is not formatted how you wanted it to be. Maybe use a code block around your code so we can read it easier.
- Sure , I just formatted the question, please read it again, thanks in advance for helping
You can dynamically create the options with the following:

selectOpts [Dd1_data.getPropertyKeys.map(a => `<option value="${Dd1_data[a]}">${a}</option>`).join('')] output [selectEl.value] Dd1_data Option1 = selected option 1 Option2 = selected option 2

Then on the HTML

<select id="selectEl" onchange="update(out)">[selectOpts]</select> <p id="out">[output]</p>

A possible problem would be using just the update() instead of specifying an element to update like update(out), in which it would re-display the [selectOpts] in which it would reset the selection.

Here is also a similar solution to a similar problem.
- Sure , thanks for your help . I will try this and let you know the results.
  
  I tried this way , please let me know your thoughts.
  
  --------------------------------------------In List editor -------------------------------
  
  List o1 = option 1 o2 = option 2 $output = [this.getPropertyKeys.map(a => `<option value="${this[a]}">${a}</option>`).join('')]
  
  --------------------------------------------In HTML editor -------------------------------
  
  <select id="selectEl" onclick = "update(out)">[List]</select> <p id ="out">[selectEl.value]</p>
  
  Please correct me if I made mistakes, i tried this method because It can be dynamic and much friendly
  
  And second thing is ,it might be dumb but, how do I tell the ai helper to edit the content in list editor instead of html editor. Is it even possible??
  
  That should work too. On the select, it should be oninput or onchange since you don't really click it. You could add a comment on what you want the AI to generate on the List Editor then press ctrl+space and dots should appear, then wait for a little bit.
  
  Perchance syntax is a domain-specific language so the AI might not understand what you want it to do, but simple ones like // write a list of furniture then ctrl+space and it seems to work fine.

6 comments