Agfdhyk

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

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>

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

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)',

            }

        }

        */

    }

}