# Change the scene background on button click

**URL:** <https://discourse.threejs.org/t/change-the-scene-background-on-button-click/49107>\
**Category:** Questions\
**Tags:** background, scene, gltf-loader, button\
**Created:** [March 15, 2023, 9:32am UTC](https://discourse.threejs.org/t/change-the-scene-background-on-button-click/49107 "2023-03-15T09:32:35Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![TheColdVolcano](https://avatars.discourse-cdn.com/v4/letter/t/a183cd/32.png) [@TheColdVolcano](https://discourse.threejs.org/u/TheColdVolcano)\
**Post date:** [March 15, 2023, 9:32am UTC](https://discourse.threejs.org/t/change-the-scene-background-on-button-click/49107/1 "2023-03-15T09:32:35Z")

</div>

```javascript
<button id="btnBlue">Blue</button>
<button id="btnGreen">Green</button>
<button id="btnYellow">Yellow</button>

<script>
		document.getElementById("btnBlue").addEventListener("click", SetSceneBackground(0xADD8E6));
		document.getElementById("btnBlue").addEventListener("click", SetSceneBackground(0x90EE90));
		document.getElementById("btnBlue").addEventListener("click", SetSceneBackground(0xFFFF00));

		// Toggle BG Color
		function SetSceneBackground(colorCode) {
			scene.background = new THREE.Color(colorCode);
		}
</script>

```

Now it is obvious that since the scene is not yet initialized, this will throw an error. Scene instance is created in the init() method. How do I achieve this?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 15, 2023, 9:53am UTC](https://discourse.threejs.org/t/change-the-scene-background-on-button-click/49107/2 "2023-03-15T09:53:18Z")

</div>

In the code provided, you add three event listeners to one button (btnBlue).

Maybe to use something like this:

```javascript
document.getElementById("btnBlue").addEventListener("click", event => {SetSceneBackground(0xADD8E6)});
document.getElementById("btnGreen").addEventListener("click", event => {SetSceneBackground(0x90EE90)});
document.getElementById("btnYellow").addEventListener("click", event => {SetSceneBackground(0xFFFF00)});

```

---

<div class="post-metadata">

**Author:** ![TheColdVolcano](https://avatars.discourse-cdn.com/v4/letter/t/a183cd/32.png) [@TheColdVolcano](https://discourse.threejs.org/u/TheColdVolcano)\
**Post date:** [March 15, 2023, 10:03am UTC](https://discourse.threejs.org/t/change-the-scene-background-on-button-click/49107/3 "2023-03-15T10:03:29Z")

</div>

> [@prisoner849](#):
>
> Maybe to use something like this:
> 
> ```javascript
> 
> ```

The question is where do I place this code? Since the scene gets instantiated in the init() method, it will throw an error that scene is not defined? What I am trying to do is just change the background color of the scene. However, it either does not find the scene or if I place the event listener in the init() method then it will throw some other error.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 15, 2023, 11:13am UTC](https://discourse.threejs.org/t/change-the-scene-background-on-button-click/49107/4 "2023-03-15T11:13:03Z")

</div>

> [@TheColdVolcano](#):
>
> `.addEventListener("click", SetSceneBackground(0xADD8E6))`

Doesn’t it mean, that you call `SetSceneBackground(...)` immediately in this line?  
Instead, wrap this call in a function for callback: `event => {SetSceneBackground(...)}`.

> [@TheColdVolcano](#):
>
> However, it either does not find the scene or if I place the event listener in the init() method then it will throw some other error.

Would be cool to provide a working live code example, that demonstrates the issue and the structure of your project.

---

<div class="post-metadata">

**Author:** ![TheColdVolcano](https://avatars.discourse-cdn.com/v4/letter/t/a183cd/32.png) [@TheColdVolcano](https://discourse.threejs.org/u/TheColdVolcano)\
**Post date:** [March 15, 2023, 11:32am UTC](https://discourse.threejs.org/t/change-the-scene-background-on-button-click/49107/5 "2023-03-15T11:32:40Z")

</div>

> [@TheColdVolcano](#):
>
> The question is where do I place this code? Since the scene gets instantiated in the init() method, it will throw an error that scene is not defined? What I am trying to do is just change the background color of the scene. However, it either does not find the scene or if I place the event listener in the init() method then it will throw some other error.

File Structure:

![threejs](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/9/a9c7b1f75050542daeb475e079ef567a0e39c33b.png)

HTML file. Please note this is just the WebGL\_Loader\_GLTF example from the threejs website. I am just fiddling with it for the purpose of getting hang of it.

[WebGL\_Loader\_GLTF.html](https://discourse.threejs.org/uploads/short-url/i4psNSyVWjnFXxB609XvDga5VO1.html) (5.4 KB)

In this current example, I have used radio button instead of button. Alert shows the right value being selected. However, the scene background color does not change yet.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 15, 2023, 7:56pm UTC](https://discourse.threejs.org/t/change-the-scene-background-on-button-click/49107/6 "2023-03-15T19:56:58Z")

</div>

like @prisoner849 said, there is a bug in your code, it doesn’t matter where you place it.

this is wrong, it gets called immediately, and it won’t return a callable function, just `undefined`

```jsx
document.getElementById("btnBlue").addEventListener("click", SetSceneBackground(0xADD8E6))

```

this is right, it gets called once the button is pressed, it won’t crash

```jsx
document.getElementById("btnBlue").addEventListener("click", () => SetSceneBackground(0xADD8E6))

```

---

<div class="post-metadata">

**Author:** ![TheColdVolcano](https://avatars.discourse-cdn.com/v4/letter/t/a183cd/32.png) [@TheColdVolcano](https://discourse.threejs.org/u/TheColdVolcano)\
**Post date:** [March 16, 2023, 5:32am UTC](https://discourse.threejs.org/t/change-the-scene-background-on-button-click/49107/7 "2023-03-16T05:32:27Z")

</div>

> [@drcmda](#):
>
> `document.getElementById("btnBlue").addEventListener("click", () => SetSceneBackground(0xADD8E6))`

Tried this and it throws this error:

> Uncaught ReferenceError: SetSceneBackground is not defined  
> at HTMLButtonElement

Uploaded file for your reference:

[WebGL\_Loader\_GLTF copy.html](https://discourse.threejs.org/uploads/short-url/xKcnLea4NKjQloqa8NeK6lTag4Y.html) (5.7 KB)

And if I place the function outside `<script type="module">` then it will obviously throw scene not defined error as the instance of the scene is not yet created.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [March 16, 2023, 6:31am UTC](https://discourse.threejs.org/t/change-the-scene-background-on-button-click/49107/8 "2023-03-16T06:31:21Z")

</div>

i think you just need to put your `SetSceneBackground` function and event listeners into the same section of code that `scene` is defined, you’ve got it in a completely irrelevant place and out of the scope of `scene`, otherwise it works…  
https://codepen.io/forerunrun/embed/preview/VwGxRxb?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=VwGxRxb

---

<div class="post-metadata">

**Author:** ![TheColdVolcano](https://avatars.discourse-cdn.com/v4/letter/t/a183cd/32.png) [@TheColdVolcano](https://discourse.threejs.org/u/TheColdVolcano)\
**Post date:** [March 16, 2023, 6:36am UTC](https://discourse.threejs.org/t/change-the-scene-background-on-button-click/49107/9 "2023-03-16T06:36:56Z")

</div>

I have tried putting both in the init() itself. However, it does not recognize the click.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [March 16, 2023, 6:38am UTC](https://discourse.threejs.org/t/change-the-scene-background-on-button-click/49107/10 "2023-03-16T06:38:44Z")

</div>

see the linked pen, it’s pretty straight forward.

---

<div class="post-metadata">

**Author:** ![TheColdVolcano](https://avatars.discourse-cdn.com/v4/letter/t/a183cd/32.png) [@TheColdVolcano](https://discourse.threejs.org/u/TheColdVolcano)\
**Post date:** [March 16, 2023, 6:59am UTC](https://discourse.threejs.org/t/change-the-scene-background-on-button-click/49107/11 "2023-03-16T06:59:34Z")

</div>

Thank you. This is working. Seems like I missed something stupid.