Mixing
How do I access JavaScript variable under Color portion of HTML code?
up vote
1
down vote
favorite
I would like to access the variable "theSkyColour" inside the HTML code below as shown. May I know how do I access it as shown?
The following is the code I have written:
function getSkyColour() {
var theSkyColour = localStorage.getItem('skySetting');
}<a-sky id="skyColor" src="#sky"
material="shader:gradient; topColor: <<I want to access theSkyColor here>>; bottomColor: <<I want to access theSkyColor here>> ; offset:0;"></a-sky>I have viewed other answers like the one here: Javascript variable access in HTML, however, it did not work for me as I am unable to change the color of the sky in the viewing page.
I've created the following HTML pages.
1. A settings page to adjust the color of the sky saved in a localStorage as "skyColor".
2. A viewing page for the user to view the color of the sky.
The reason why I have an a-sky tag is that I am using aframe.io
javascript html variables web-component aframe
edited 16 hours ago
Supersharp
12.2k22666
asked 21 hours ago
Jim Ng
63
add a comment |
up vote
1
down vote
favorite
I would like to access the variable "theSkyColour" inside the HTML code below as shown. May I know how do I access it as shown?
The following is the code I have written:
function getSkyColour() {
var theSkyColour = localStorage.getItem('skySetting');
}<a-sky id="skyColor" src="#sky"
material="shader:gradient; topColor: <<I want to access theSkyColor here>>; bottomColor: <<I want to access theSkyColor here>> ; offset:0;"></a-sky>I have viewed other answers like the one here: Javascript variable access in HTML, however, it did not work for me as I am unable to change the color of the sky in the viewing page.
I've created the following HTML pages.
1. A settings page to adjust the color of the sky saved in a localStorage as "skyColor".
2. A viewing page for the user to view the color of the sky.
The reason why I have an a-sky tag is that I am using aframe.io
javascript html variables web-component aframe
edited 16 hours ago
Supersharp
12.2k22666
asked 21 hours ago
Jim Ng
63
It's not possible to access javascript variable in html.
– Raja Sekar
21 hours ago
check this: w3schools.com/js/js_htmldom_css.asp
– MrAleister
21 hours ago
2
"It did not work for me" how? It is not very descriptive. Please update the snippet I made for you with your attempts - Also please tell us what framework has<a-skytags
– mplungjan
21 hours ago
Tri this:document.getElementById('skyColor').setAttribute('material', document.getElementById('skyColor').getAttribute('style')+'; color: '+getSkyColour());
– Mohammad Zare Moghadam
21 hours ago
I concur with @mplungjan we need to know which flavor of custom elements you are using. Not a ninja myself in this area but sounds reasonably doable at least in vanilla flavor, but without knowing if it is the one you use, we can't make an answer for you.
– Kaiido
21 hours ago
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I would like to access the variable "theSkyColour" inside the HTML code below as shown. May I know how do I access it as shown?
The following is the code I have written:
function getSkyColour() {
var theSkyColour = localStorage.getItem('skySetting');
}<a-sky id="skyColor" src="#sky"
material="shader:gradient; topColor: <<I want to access theSkyColor here>>; bottomColor: <<I want to access theSkyColor here>> ; offset:0;"></a-sky>I have viewed other answers like the one here: Javascript variable access in HTML, however, it did not work for me as I am unable to change the color of the sky in the viewing page.
I've created the following HTML pages.
1. A settings page to adjust the color of the sky saved in a localStorage as "skyColor".
2. A viewing page for the user to view the color of the sky.
The reason why I have an a-sky tag is that I am using aframe.io
javascript html variables web-component aframe
edited 16 hours ago
Supersharp
12.2k22666
asked 21 hours ago
Jim Ng
63
I would like to access the variable "theSkyColour" inside the HTML code below as shown. May I know how do I access it as shown?
The following is the code I have written:
function getSkyColour() {
var theSkyColour = localStorage.getItem('skySetting');
}<a-sky id="skyColor" src="#sky"
material="shader:gradient; topColor: <<I want to access theSkyColor here>>; bottomColor: <<I want to access theSkyColor here>> ; offset:0;"></a-sky>I have viewed other answers like the one here: Javascript variable access in HTML, however, it did not work for me as I am unable to change the color of the sky in the viewing page.
I've created the following HTML pages.
1. A settings page to adjust the color of the sky saved in a localStorage as "skyColor".
2. A viewing page for the user to view the color of the sky.
The reason why I have an a-sky tag is that I am using aframe.io
function getSkyColour() {
var theSkyColour = localStorage.getItem('skySetting');
}<a-sky id="skyColor" src="#sky"
material="shader:gradient; topColor: <<I want to access theSkyColor here>>; bottomColor: <<I want to access theSkyColor here>> ; offset:0;"></a-sky>function getSkyColour() {
var theSkyColour = localStorage.getItem('skySetting');
}<a-sky id="skyColor" src="#sky"
material="shader:gradient; topColor: <<I want to access theSkyColor here>>; bottomColor: <<I want to access theSkyColor here>> ; offset:0;"></a-sky>javascript html variables web-component aframe
javascript html variables web-component aframe
edited 16 hours ago
Supersharp
12.2k22666
asked 21 hours ago
Jim Ng
63
edited 16 hours ago
Supersharp
12.2k22666
asked 21 hours ago
Jim Ng
63
edited 16 hours ago
Supersharp
12.2k22666
edited 16 hours ago
Supersharp
12.2k22666
edited 16 hours ago
Supersharp
12.2k22666
12.2k22666
asked 21 hours ago
Jim Ng
63
asked 21 hours ago
Jim Ng
63
asked 21 hours ago
Jim Ng
63
63
It's not possible to access javascript variable in html.
– Raja Sekar
21 hours ago
check this: w3schools.com/js/js_htmldom_css.asp
– MrAleister
21 hours ago
2
"It did not work for me" how? It is not very descriptive. Please update the snippet I made for you with your attempts - Also please tell us what framework has<a-skytags
– mplungjan
21 hours ago
Tri this:document.getElementById('skyColor').setAttribute('material', document.getElementById('skyColor').getAttribute('style')+'; color: '+getSkyColour());
– Mohammad Zare Moghadam
21 hours ago
I concur with @mplungjan we need to know which flavor of custom elements you are using. Not a ninja myself in this area but sounds reasonably doable at least in vanilla flavor, but without knowing if it is the one you use, we can't make an answer for you.
– Kaiido
21 hours ago
add a comment |
It's not possible to access javascript variable in html.
– Raja Sekar
21 hours ago
check this: w3schools.com/js/js_htmldom_css.asp
– MrAleister
21 hours ago
2
"It did not work for me" how? It is not very descriptive. Please update the snippet I made for you with your attempts - Also please tell us what framework has<a-skytags
– mplungjan
21 hours ago
Tri this:document.getElementById('skyColor').setAttribute('material', document.getElementById('skyColor').getAttribute('style')+'; color: '+getSkyColour());
– Mohammad Zare Moghadam
21 hours ago
I concur with @mplungjan we need to know which flavor of custom elements you are using. Not a ninja myself in this area but sounds reasonably doable at least in vanilla flavor, but without knowing if it is the one you use, we can't make an answer for you.
– Kaiido
21 hours ago
It's not possible to access javascript variable in html.
– Raja Sekar
21 hours ago
It's not possible to access javascript variable in html.
– Raja Sekar
21 hours ago
check this: w3schools.com/js/js_htmldom_css.asp
– MrAleister
21 hours ago
check this: w3schools.com/js/js_htmldom_css.asp
– MrAleister
21 hours ago
2
2
"It did not work for me" how? It is not very descriptive. Please update the snippet I made for you with your attempts - Also please tell us what framework has
<a-sky tags– mplungjan
21 hours ago
"It did not work for me" how? It is not very descriptive. Please update the snippet I made for you with your attempts - Also please tell us what framework has
<a-sky tags– mplungjan
21 hours ago
Tri this:
document.getElementById('skyColor').setAttribute('material', document.getElementById('skyColor').getAttribute('style')+'; color: '+getSkyColour());– Mohammad Zare Moghadam
21 hours ago
Tri this:
document.getElementById('skyColor').setAttribute('material', document.getElementById('skyColor').getAttribute('style')+'; color: '+getSkyColour());– Mohammad Zare Moghadam
21 hours ago
I concur with @mplungjan we need to know which flavor of custom elements you are using. Not a ninja myself in this area but sounds reasonably doable at least in vanilla flavor, but without knowing if it is the one you use, we can't make an answer for you.
– Kaiido
21 hours ago
I concur with @mplungjan we need to know which flavor of custom elements you are using. Not a ninja myself in this area but sounds reasonably doable at least in vanilla flavor, but without knowing if it is the one you use, we can't make an answer for you.
– Kaiido
21 hours ago
add a comment |
3 Answers
3
active
oldest
votes
up vote
0
down vote
You can’t, but you can change the function to update the color of the sky.
document.getElementById("skyColor").material = `defaultStylesInHere topColor:${localStorage.getItem("skyColor")};`;
answered 21 hours ago
DarkHeart Productions
563
New contributor
DarkHeart Productions is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
You likely wantgetAttribute("material")here
– mplungjan
21 hours ago
1
Please do not use curly quotes - are you updating on a phone?
– mplungjan
21 hours ago
1
You can add comments as comments, no need to edit the post for that.
– Luca Kiebel
21 hours ago
Yes, I am using a phone, it was stated at the bottom of my post
– DarkHeart Productions
21 hours ago
2
Oh wow, did not see that. :/
– DarkHeart Productions
21 hours ago
|
show 1 more comment
up vote
0
down vote
check out the snippets for getting and setting attributesin an a-frame component. Refer to the following documentation:
https://aframe.io/docs/0.8.0/core/entity.html#getattribute-componentname
It explains very well how to get and how to set values from component properties and sub-properties:
Get Property
Set Property
answered 20 hours ago
Sunny Sharma
2,60641950
Does this apply in my scenario, considering that I am accessing a local session? I am using some aframe components, however, I am not sure if it works since I am changing a local session on another HTML page. Could you advise if there is an alternative for using local sessions storage?
– Jim Ng
17 hours ago
I don't think templating is available for aframe at component sub-properties level, as they're one string. I think you can modify the values right after initialization of the frame. Not sure how it is done yet!
– Sunny Sharma
17 hours ago
add a comment |
up vote
0
down vote
Unless you are using a framework like Angular or django, it is not possible to access variables in your HTML code, instead you can construct the attribute in your Javascript and add it to the element.
EX:
var myAttr = "shader:gradient; topColor:"+skyColor+"; bottomColor:"+skyColor+"; offset:0;"
$("#skyColor").attr("material",myAttr)
Update: without using jQuery:
<script>
function getSkyColour() {
var theSkyColour = localStorage.getItem('skySetting');
}
getSkyColour()
var myAttr = "shader:gradient; topColor:"+theSkyColour+"; bottomColor:"+theSkyColour+"; offset:0;"
document.getElementById(‘skyColor’).setAttribute(“material”,myAttr)
</script>
answered 21 hours ago
Suhas NM
725
For the second line "$("#skyColor").attr("material",myAttr)" , may I know where should I place this line of code? Is this a PHP code? How do I use it?
– Jim Ng
17 hours ago
This is a jQuery code, you need to have jQuery library in your application to use it. If you do not have jQuey library, I will suggest an alternative to it in pure JavaScript
– Suhas NM
16 hours ago
I would like to use pure Javascript as well. However, like I mentioned in the original post, there is a problem of being unable to call it inside the HTML code with Javascript. So I'm confused. What should I do here if I would like to use pure Javascript?
– Jim Ng
16 hours ago
Basically, any JavaScript you use goes inside “<script> your JavaScript </script>”
– Suhas NM
16 hours ago
I will update my answer to your requirement
– Suhas NM
16 hours ago
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
You can’t, but you can change the function to update the color of the sky.
document.getElementById("skyColor").material = `defaultStylesInHere topColor:${localStorage.getItem("skyColor")};`;
answered 21 hours ago
DarkHeart Productions
563
New contributor
DarkHeart Productions is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
You likely wantgetAttribute("material")here
– mplungjan
21 hours ago
1
Please do not use curly quotes - are you updating on a phone?
– mplungjan
21 hours ago
1
You can add comments as comments, no need to edit the post for that.
– Luca Kiebel
21 hours ago
Yes, I am using a phone, it was stated at the bottom of my post
– DarkHeart Productions
21 hours ago
2
Oh wow, did not see that. :/
– DarkHeart Productions
21 hours ago
|
show 1 more comment
up vote
0
down vote
You can’t, but you can change the function to update the color of the sky.
document.getElementById("skyColor").material = `defaultStylesInHere topColor:${localStorage.getItem("skyColor")};`;
answered 21 hours ago
DarkHeart Productions
563
New contributor
DarkHeart Productions is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
You likely wantgetAttribute("material")here
– mplungjan
21 hours ago
1
Please do not use curly quotes - are you updating on a phone?
– mplungjan
21 hours ago
1
You can add comments as comments, no need to edit the post for that.
– Luca Kiebel
21 hours ago
Yes, I am using a phone, it was stated at the bottom of my post
– DarkHeart Productions
21 hours ago
2
Oh wow, did not see that. :/
– DarkHeart Productions
21 hours ago
|
show 1 more comment
up vote
0
down vote
up vote
0
down vote
You can’t, but you can change the function to update the color of the sky.
document.getElementById("skyColor").material = `defaultStylesInHere topColor:${localStorage.getItem("skyColor")};`;
answered 21 hours ago
DarkHeart Productions
563
New contributor
DarkHeart Productions is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
You can’t, but you can change the function to update the color of the sky.
document.getElementById("skyColor").material = `defaultStylesInHere topColor:${localStorage.getItem("skyColor")};`;
answered 21 hours ago
DarkHeart Productions
563
New contributor
DarkHeart Productions is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 21 hours ago
answered 21 hours ago
DarkHeart Productions
563
New contributor
DarkHeart Productions is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 21 hours ago
DarkHeart Productions
563
answered 21 hours ago
DarkHeart Productions
563
563
New contributor
DarkHeart Productions is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
DarkHeart Productions is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
DarkHeart Productions is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
You likely wantgetAttribute("material")here
– mplungjan
21 hours ago
1
Please do not use curly quotes - are you updating on a phone?
– mplungjan
21 hours ago
1
You can add comments as comments, no need to edit the post for that.
– Luca Kiebel
21 hours ago
Yes, I am using a phone, it was stated at the bottom of my post
– DarkHeart Productions
21 hours ago
2
Oh wow, did not see that. :/
– DarkHeart Productions
21 hours ago
|
show 1 more comment
1
You likely wantgetAttribute("material")here
– mplungjan
21 hours ago
1
Please do not use curly quotes - are you updating on a phone?
– mplungjan
21 hours ago
1
You can add comments as comments, no need to edit the post for that.
– Luca Kiebel
21 hours ago
Yes, I am using a phone, it was stated at the bottom of my post
– DarkHeart Productions
21 hours ago
2
Oh wow, did not see that. :/
– DarkHeart Productions
21 hours ago
1
1
You likely want
getAttribute("material") here– mplungjan
21 hours ago
You likely want
getAttribute("material") here– mplungjan
21 hours ago
1
1
Please do not use curly quotes - are you updating on a phone?
– mplungjan
21 hours ago
Please do not use curly quotes - are you updating on a phone?
– mplungjan
21 hours ago
1
1
You can add comments as comments, no need to edit the post for that.
– Luca Kiebel
21 hours ago
You can add comments as comments, no need to edit the post for that.
– Luca Kiebel
21 hours ago
Yes, I am using a phone, it was stated at the bottom of my post
– DarkHeart Productions
21 hours ago
Yes, I am using a phone, it was stated at the bottom of my post
– DarkHeart Productions
21 hours ago
2
2
Oh wow, did not see that. :/
– DarkHeart Productions
21 hours ago
Oh wow, did not see that. :/
– DarkHeart Productions
21 hours ago
|
show 1 more comment
up vote
0
down vote
check out the snippets for getting and setting attributesin an a-frame component. Refer to the following documentation:
https://aframe.io/docs/0.8.0/core/entity.html#getattribute-componentname
It explains very well how to get and how to set values from component properties and sub-properties:
Get Property
Set Property
answered 20 hours ago
Sunny Sharma
2,60641950
Does this apply in my scenario, considering that I am accessing a local session? I am using some aframe components, however, I am not sure if it works since I am changing a local session on another HTML page. Could you advise if there is an alternative for using local sessions storage?
– Jim Ng
17 hours ago
I don't think templating is available for aframe at component sub-properties level, as they're one string. I think you can modify the values right after initialization of the frame. Not sure how it is done yet!
– Sunny Sharma
17 hours ago
add a comment |
up vote
0
down vote
check out the snippets for getting and setting attributesin an a-frame component. Refer to the following documentation:
https://aframe.io/docs/0.8.0/core/entity.html#getattribute-componentname
It explains very well how to get and how to set values from component properties and sub-properties:
Get Property
Set Property
answered 20 hours ago
Sunny Sharma
2,60641950
Does this apply in my scenario, considering that I am accessing a local session? I am using some aframe components, however, I am not sure if it works since I am changing a local session on another HTML page. Could you advise if there is an alternative for using local sessions storage?
– Jim Ng
17 hours ago
I don't think templating is available for aframe at component sub-properties level, as they're one string. I think you can modify the values right after initialization of the frame. Not sure how it is done yet!
– Sunny Sharma
17 hours ago
add a comment |
up vote
0
down vote
up vote
0
down vote
check out the snippets for getting and setting attributesin an a-frame component. Refer to the following documentation:
https://aframe.io/docs/0.8.0/core/entity.html#getattribute-componentname
It explains very well how to get and how to set values from component properties and sub-properties:
Get Property
Set Property
answered 20 hours ago
Sunny Sharma
2,60641950
check out the snippets for getting and setting attributesin an a-frame component. Refer to the following documentation:
https://aframe.io/docs/0.8.0/core/entity.html#getattribute-componentname
It explains very well how to get and how to set values from component properties and sub-properties:
Get Property
Set Property
answered 20 hours ago
Sunny Sharma
2,60641950
answered 20 hours ago
Sunny Sharma
2,60641950
answered 20 hours ago
Sunny Sharma
2,60641950
answered 20 hours ago
Sunny Sharma
2,60641950
2,60641950
Does this apply in my scenario, considering that I am accessing a local session? I am using some aframe components, however, I am not sure if it works since I am changing a local session on another HTML page. Could you advise if there is an alternative for using local sessions storage?
– Jim Ng
17 hours ago
I don't think templating is available for aframe at component sub-properties level, as they're one string. I think you can modify the values right after initialization of the frame. Not sure how it is done yet!
– Sunny Sharma
17 hours ago
add a comment |
Does this apply in my scenario, considering that I am accessing a local session? I am using some aframe components, however, I am not sure if it works since I am changing a local session on another HTML page. Could you advise if there is an alternative for using local sessions storage?
– Jim Ng
17 hours ago
I don't think templating is available for aframe at component sub-properties level, as they're one string. I think you can modify the values right after initialization of the frame. Not sure how it is done yet!
– Sunny Sharma
17 hours ago
Does this apply in my scenario, considering that I am accessing a local session? I am using some aframe components, however, I am not sure if it works since I am changing a local session on another HTML page. Could you advise if there is an alternative for using local sessions storage?
– Jim Ng
17 hours ago
Does this apply in my scenario, considering that I am accessing a local session? I am using some aframe components, however, I am not sure if it works since I am changing a local session on another HTML page. Could you advise if there is an alternative for using local sessions storage?
– Jim Ng
17 hours ago
I don't think templating is available for aframe at component sub-properties level, as they're one string. I think you can modify the values right after initialization of the frame. Not sure how it is done yet!
– Sunny Sharma
17 hours ago
I don't think templating is available for aframe at component sub-properties level, as they're one string. I think you can modify the values right after initialization of the frame. Not sure how it is done yet!
– Sunny Sharma
17 hours ago
add a comment |
up vote
0
down vote
Unless you are using a framework like Angular or django, it is not possible to access variables in your HTML code, instead you can construct the attribute in your Javascript and add it to the element.
EX:
var myAttr = "shader:gradient; topColor:"+skyColor+"; bottomColor:"+skyColor+"; offset:0;"
$("#skyColor").attr("material",myAttr)
Update: without using jQuery:
<script>
function getSkyColour() {
var theSkyColour = localStorage.getItem('skySetting');
}
getSkyColour()
var myAttr = "shader:gradient; topColor:"+theSkyColour+"; bottomColor:"+theSkyColour+"; offset:0;"
document.getElementById(‘skyColor’).setAttribute(“material”,myAttr)
</script>
answered 21 hours ago
Suhas NM
725
For the second line "$("#skyColor").attr("material",myAttr)" , may I know where should I place this line of code? Is this a PHP code? How do I use it?
– Jim Ng
17 hours ago
This is a jQuery code, you need to have jQuery library in your application to use it. If you do not have jQuey library, I will suggest an alternative to it in pure JavaScript
– Suhas NM
16 hours ago
I would like to use pure Javascript as well. However, like I mentioned in the original post, there is a problem of being unable to call it inside the HTML code with Javascript. So I'm confused. What should I do here if I would like to use pure Javascript?
– Jim Ng
16 hours ago
Basically, any JavaScript you use goes inside “<script> your JavaScript </script>”
– Suhas NM
16 hours ago
I will update my answer to your requirement
– Suhas NM
16 hours ago
add a comment |
up vote
0
down vote
Unless you are using a framework like Angular or django, it is not possible to access variables in your HTML code, instead you can construct the attribute in your Javascript and add it to the element.
EX:
var myAttr = "shader:gradient; topColor:"+skyColor+"; bottomColor:"+skyColor+"; offset:0;"
$("#skyColor").attr("material",myAttr)
Update: without using jQuery:
<script>
function getSkyColour() {
var theSkyColour = localStorage.getItem('skySetting');
}
getSkyColour()
var myAttr = "shader:gradient; topColor:"+theSkyColour+"; bottomColor:"+theSkyColour+"; offset:0;"
document.getElementById(‘skyColor’).setAttribute(“material”,myAttr)
</script>
answered 21 hours ago
Suhas NM
725
For the second line "$("#skyColor").attr("material",myAttr)" , may I know where should I place this line of code? Is this a PHP code? How do I use it?
– Jim Ng
17 hours ago
This is a jQuery code, you need to have jQuery library in your application to use it. If you do not have jQuey library, I will suggest an alternative to it in pure JavaScript
– Suhas NM
16 hours ago
I would like to use pure Javascript as well. However, like I mentioned in the original post, there is a problem of being unable to call it inside the HTML code with Javascript. So I'm confused. What should I do here if I would like to use pure Javascript?
– Jim Ng
16 hours ago
Basically, any JavaScript you use goes inside “<script> your JavaScript </script>”
– Suhas NM
16 hours ago
I will update my answer to your requirement
– Suhas NM
16 hours ago
add a comment |
up vote
0
down vote
up vote
0
down vote
Unless you are using a framework like Angular or django, it is not possible to access variables in your HTML code, instead you can construct the attribute in your Javascript and add it to the element.
EX:
var myAttr = "shader:gradient; topColor:"+skyColor+"; bottomColor:"+skyColor+"; offset:0;"
$("#skyColor").attr("material",myAttr)
Update: without using jQuery:
<script>
function getSkyColour() {
var theSkyColour = localStorage.getItem('skySetting');
}
getSkyColour()
var myAttr = "shader:gradient; topColor:"+theSkyColour+"; bottomColor:"+theSkyColour+"; offset:0;"
document.getElementById(‘skyColor’).setAttribute(“material”,myAttr)
</script>
answered 21 hours ago
Suhas NM
725
Unless you are using a framework like Angular or django, it is not possible to access variables in your HTML code, instead you can construct the attribute in your Javascript and add it to the element.
EX:
var myAttr = "shader:gradient; topColor:"+skyColor+"; bottomColor:"+skyColor+"; offset:0;"
$("#skyColor").attr("material",myAttr)
Update: without using jQuery:
<script>
function getSkyColour() {
var theSkyColour = localStorage.getItem('skySetting');
}
getSkyColour()
var myAttr = "shader:gradient; topColor:"+theSkyColour+"; bottomColor:"+theSkyColour+"; offset:0;"
document.getElementById(‘skyColor’).setAttribute(“material”,myAttr)
</script>
answered 21 hours ago
Suhas NM
725
edited 16 hours ago
answered 21 hours ago
Suhas NM
725
answered 21 hours ago
Suhas NM
725
answered 21 hours ago
Suhas NM
725
725
For the second line "$("#skyColor").attr("material",myAttr)" , may I know where should I place this line of code? Is this a PHP code? How do I use it?
– Jim Ng
17 hours ago
This is a jQuery code, you need to have jQuery library in your application to use it. If you do not have jQuey library, I will suggest an alternative to it in pure JavaScript
– Suhas NM
16 hours ago
I would like to use pure Javascript as well. However, like I mentioned in the original post, there is a problem of being unable to call it inside the HTML code with Javascript. So I'm confused. What should I do here if I would like to use pure Javascript?
– Jim Ng
16 hours ago
Basically, any JavaScript you use goes inside “<script> your JavaScript </script>”
– Suhas NM
16 hours ago
I will update my answer to your requirement
– Suhas NM
16 hours ago
add a comment |
For the second line "$("#skyColor").attr("material",myAttr)" , may I know where should I place this line of code? Is this a PHP code? How do I use it?
– Jim Ng
17 hours ago
This is a jQuery code, you need to have jQuery library in your application to use it. If you do not have jQuey library, I will suggest an alternative to it in pure JavaScript
– Suhas NM
16 hours ago
I would like to use pure Javascript as well. However, like I mentioned in the original post, there is a problem of being unable to call it inside the HTML code with Javascript. So I'm confused. What should I do here if I would like to use pure Javascript?
– Jim Ng
16 hours ago
Basically, any JavaScript you use goes inside “<script> your JavaScript </script>”
– Suhas NM
16 hours ago
I will update my answer to your requirement
– Suhas NM
16 hours ago
For the second line "$("#skyColor").attr("material",myAttr)" , may I know where should I place this line of code? Is this a PHP code? How do I use it?
– Jim Ng
17 hours ago
For the second line "$("#skyColor").attr("material",myAttr)" , may I know where should I place this line of code? Is this a PHP code? How do I use it?
– Jim Ng
17 hours ago
This is a jQuery code, you need to have jQuery library in your application to use it. If you do not have jQuey library, I will suggest an alternative to it in pure JavaScript
– Suhas NM
16 hours ago
This is a jQuery code, you need to have jQuery library in your application to use it. If you do not have jQuey library, I will suggest an alternative to it in pure JavaScript
– Suhas NM
16 hours ago
I would like to use pure Javascript as well. However, like I mentioned in the original post, there is a problem of being unable to call it inside the HTML code with Javascript. So I'm confused. What should I do here if I would like to use pure Javascript?
– Jim Ng
16 hours ago
I would like to use pure Javascript as well. However, like I mentioned in the original post, there is a problem of being unable to call it inside the HTML code with Javascript. So I'm confused. What should I do here if I would like to use pure Javascript?
– Jim Ng
16 hours ago
Basically, any JavaScript you use goes inside “<script> your JavaScript </script>”
– Suhas NM
16 hours ago
Basically, any JavaScript you use goes inside “<script> your JavaScript </script>”
– Suhas NM
16 hours ago
I will update my answer to your requirement
– Suhas NM
16 hours ago
I will update my answer to your requirement
– Suhas NM
16 hours ago
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372122%2fhow-do-i-access-javascript-variable-under-color-portion-of-html-code%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
It's not possible to access javascript variable in html.
– Raja Sekar
21 hours ago
check this: w3schools.com/js/js_htmldom_css.asp
– MrAleister
21 hours ago
2
"It did not work for me" how? It is not very descriptive. Please update the snippet I made for you with your attempts - Also please tell us what framework has
<a-skytags– mplungjan
21 hours ago
Tri this:
document.getElementById('skyColor').setAttribute('material', document.getElementById('skyColor').getAttribute('style')+'; color: '+getSkyColour());– Mohammad Zare Moghadam
21 hours ago
I concur with @mplungjan we need to know which flavor of custom elements you are using. Not a ninja myself in this area but sounds reasonably doable at least in vanilla flavor, but without knowing if it is the one you use, we can't make an answer for you.
– Kaiido
21 hours ago