c/perchance · by animewatcher@lemmy.world · 1y

[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 🫠

2 points · 6 comments · view on lemmy.world

6 Comments

wthit56@lemmy.world · 1 pts · 1y (1 reply)

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.

animewatcher@lemmy.world · 0 pts · 1y

Sure , I just formatted the question, please read it again, thanks in advance for helping

VioneT@lemmy.world · 1 pts · 1y (3 replies)

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.

animewatcher@lemmy.world · 1 pts · 1y (2 replies)

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??

VioneT@lemmy.world · 1 pts · 1y (1 reply)

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.

animewatcher@lemmy.world · 1 pts · 1y

Thanks for the help @VioneT@lemmy.world !!!!