How do I access JavaScript variable under Color portion of HTML code?

Question

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('skySet[enter image description here][1]ting');
}

<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

Update: After attempting to use JavaScript along with localStorage Sessions:

Javascript Code:

<script>
function getSkyColor() {
  var theSkyColor = localStorage.getItem('skySetting');
}
getSkyColour()

var myAttr = "shader:gradient; topColor:"+theSkyColor+"; 
bottomColor:"+theSkyColor+"; offset:0;"
document.getElementById(‘skyColor’).setAttribute(“material”,myAttr)
</script>

HTML Code:

  <a-sky id="skyColor" src="#sky" material="shader:gradient; offset:0;"></a-sky>

Unfortunately, it still does not work, as the display I get is not what I have expected, which is a night sky under the RGB color: 41 35 71. (See attached screenshot)

Failed display of desired colors RGB 41 35 71

What I want and What I have

"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
– mplungjan, Commented Nov 19, 2018 at 10:03
Tri this: document.getElementById('skyColor').setAttribute('material', document.getElementById('skyColor').getAttribute('style')+'; color: '+getSkyColour()); — Mohammad Zare Moghadam
– Mohammad Zare Moghadam, Commented Nov 19, 2018 at 10:09

Suhas NM · Accepted Answer · 2018-11-19 15:43:18Z

0

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>

edited Nov 19, 2018 at 15:43

answered Nov 19, 2018 at 10:09

Suhas NM

1,0909 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

18 Comments

Jim Ng Over a year 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?

Suhas NM Over a year 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

Jim Ng Over a year 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?

Suhas NM Over a year ago

Basically, any JavaScript you use goes inside “<script> your JavaScript </script>”

Jim Ng Over a year ago

Hi, I've edited the code according to what you've specified. Unfortunately, the display still does not update according to the desired preferences. I have edited the original post to include the results shown on the browser, along with the codes I have used in the HTML code. Could you advise? Thank you so much for your help

|

Sunny Sharma · Accepted Answer · 2018-11-19 11:14:36Z

0

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 Nov 19, 2018 at 11:14

Sunny Sharma

5,0045 gold badges41 silver badges76 bronze badges

2 Comments

Jim Ng Over a year 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?

Sunny Sharma Over a year 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!

DarkHeart Productions · Accepted Answer · 2018-11-22 01:47:28Z

0

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")};`;

Update

let setSkyColor = (val) => {
    localStorage.setItem('skyColor', `defaultStylesInHere topColor:${val};bottomColor:${val}`);
}
let loadSkyColor = () => {
    document.getElementById('skyColor').attributes.material = localStorage.getItem('skyColor');
}

I can make full functions, but it should not be necessary
You could also use JSON or Objects to set and grab sky properties

let app = {
    skyProp: {
        /*
        color: 'rgba(200, 200, 255, 1)',
        OR
        color: {
            default: {
                color: 'rgba(200, 200, 255, 1)',
                topColor: 'green',
            },
            night: {
                color: 'rgba(255, 255, 255, 1)',
                bottomColor: 'rgba(155, 155, 155, 1)',
            }
        }
        */
    }
}

edited Nov 22, 2018 at 1:47

answered Nov 19, 2018 at 10:04

DarkHeart Productions

565 bronze badges

7 Comments

mplungjan Over a year ago

You likely want getAttribute("material") here

mplungjan Over a year ago

Please do not use curly quotes - are you updating on a phone?

Luca Kiebel Over a year ago

You can add comments as comments, no need to edit the post for that.

DarkHeart Productions Over a year ago

Yes, I am using a phone, it was stated at the bottom of my post

mplungjan Over a year ago

iPhones do normal quotes if you hold and drag on the quote

|

Collectives™ on Stack Overflow

How do I access JavaScript variable under Color portion of HTML code?

3 Answers 3

18 Comments

2 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

18 Comments

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related