How to insert javascript code into an element?

[enrb]

I'm trying to insert javascript code into an element, but it doesn't work and most likely I'm doing something wrong...

I tried to look in the wiki, but I didn't find any examples that fit my needs...

I tried with different versions of my code, but most likely I'm doing something wrong...
I tried to insert this code into the article___customer element

var price = document.getElementById('90');
if (this.element.get('value') === "1" || this.element.get('value') === "2") {price.backgroundColor = '#FFFF99';}}

unfortunately it doesn't work...

 

[troester]

Where are you trying to do this?
https://fabrikar.com/forums/index.php?wiki/element-javascript/

 

[enrb]

I'm inserting the code in the "Javascript Code" box, but unfortunately it doesn't work.

If I use the javascript code to make a change to the same element where I inserted the javascript code, everything works perfectly, for example with this code:
this.element.setStyle('background-color','#FFFF99');
inserted on the article___customer element, the article___customer element in the front-end will have a yellow background

If instead I insert the javascript code on the article___customer element, but I want to put the yellow background on another element (for example on the price element), then my code doesn't work.

I know that for such a trivial thing it is possible to use the fields "if this element", "value", etc... but I wanted to insert a slightly more complex javascript code, and therefore I would like to use the Javascript Code field.
I'm trying to modify the background simply to understand how I should write the code in the Javascript Code field...

 

[startpoint]

You can do this with css only:

.your_element[value="1"], .your_element[value="2"]{
background: #FFFF99
}

Limitations:

• only work if the value is set in the HTML at the time of rendering.
• Changes made dynamically (e.g., user typing or through JavaScript) will not update the background.

 

[enrb]

no, it is not possible to do it only with css, you need javascrit
because I want that if an element_A=1, then element_B applies the yellow background

 

[startpoint]

Then the easiest way is to use fom_XX.js and do what you want.

 

[enrb]

What is the correct path to put the form_XX.js file?
\media\com_fabrik\js\
or
\components\com_fabrik\js

 

[startpoint]

\components\com_fabrik\js

 

[enrb]

Perfect, I added the form_6.js file to the indicated path and everything works correctly as far as the form opened in edit mode is concerned...

if I want to add some javascript code in view mode only, do I have to create another javascript file?

 

[enrb]

Sorry, I found the solution myself...

For forms: form_X.js
For display: details_X.js

I must have created the 2 javascritp files and inserted them in the correct path everything works correctly.

Thank you very much.

 

[startpoint]

For Lists you should name your file list_X.js