# How to use \<script\> in the Aurelia?

**URL:** <https://discourse.aurelia.io/t/how-to-use-script-in-the-aurelia/3130>\
**Category:** Uncategorized\
**Created:** [January 1, 2020, 10:58pm UTC](https://discourse.aurelia.io/t/how-to-use-script-in-the-aurelia/3130 "2020-01-01T22:58:03Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![adn](https://avatars.discourse-cdn.com/v4/letter/a/ce7236/32.png) [@adn](https://discourse.aurelia.io/u/adn)\
**Post date:** [January 1, 2020, 10:58pm UTC](https://discourse.aurelia.io/t/how-to-use-script-in-the-aurelia/3130/1 "2020-01-01T22:58:03Z")

</div>

I am new to Aurelia. For the following example, I know that the code between \<_ **body** _\> will be in **home.html** inside \<_ **template** _\>. But where will the code between \<_ **script** _\> will be? inside **home.js**?

```
<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Id</h2>

<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementsById</b> method.</p>

<p id="demo"></p>

<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML = 
"The text from the intro paragraph is " + myElement.innerHTML;
</script>

</body>
</html>

```

Is there a way to have something like this in Aurelia?  
`<script src="~/src/script/site.js"></script>`

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [January 1, 2020, 11:26pm UTC](https://discourse.aurelia.io/t/how-to-use-script-in-the-aurelia/3130/2 "2020-01-01T23:26:40Z")

</div>

This depends on what that site.js is? For example, is this utilities inside the aurelia site, functions that control a specific page, etc.??? If this is simply code to use for the home page (your home.js/html viewmodels) then you’d want to put your viewmodel code inside the home.js which will work with the view because it’s following the proper naming convention when home is routed to. If this is some custom code you’d like to use within your site then you could place it in your main.js which is your initial loading script. If it’s just a custom JS library you’d simply call `import '/path/to/script.js';`. If you made it a js module then you could DI it just like `import {MyThingy} from 'path/to/script.js';`within the viewmodels you want to use it in.

---

<div class="post-metadata">

**Author:** ![adn](https://avatars.discourse-cdn.com/v4/letter/a/ce7236/32.png) [@adn](https://discourse.aurelia.io/u/adn)\
**Post date:** [January 1, 2020, 11:36pm UTC](https://discourse.aurelia.io/t/how-to-use-script-in-the-aurelia/3130/3 "2020-01-01T23:36:28Z")

</div>

Yes it have JavaScript DOM Methods. Like the example above:

> var myElement = document.getElementById(“intro”);  
> document.getElementById(“demo”).innerHTML =  
> "The text from the intro paragraph is " + myElement.innerHTML;

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [January 1, 2020, 11:55pm UTC](https://discourse.aurelia.io/t/how-to-use-script-in-the-aurelia/3130/4 "2020-01-01T23:55:54Z")

</div>

Hmmm. If what you are attempting to do is to manipulate the DOM such as in your example, then you would simply place the functionality for that code within it’s viewmodel. For example, you are wanting to do something with your home page and you’ve setup a view/viewmodel for your home page (which would be home.js and home.html) then you’d place all your logic for the home view inside the view model (home.js). I realize your example above is just that, an example but if you didn’t already know this, you don’t need to use that format to inject content into the DOM. You can use string interpolation and don’t even need to traverse the element in the DOM. Even if you did need access to a DOM element inside your view, you can use the `rel="myElem"` attribute and have access to that DOM element within your viewmodel with `this.myElem`. I’d suggest installing a sample app via aurelia’s CLI tool. Using the “Custom App” option you’ll be able to specify a “navigation app” for a more real world example app that will have routing examples baked in.

---

<div class="post-metadata">

**Author:** ![adn](https://avatars.discourse-cdn.com/v4/letter/a/ce7236/32.png) [@adn](https://discourse.aurelia.io/u/adn)\
**Post date:** [January 2, 2020, 3:22am UTC](https://discourse.aurelia.io/t/how-to-use-script-in-the-aurelia/3130/5 "2020-01-02T03:22:27Z")

</div>

Thanks for this. I want to change the background color based on the innerhtml. Am I doing it right?

> ```
> <template><div ref="myElem">White</div>
> </template>
> 
> ```

```
changeBackgroundColor() {
        var text = this.myElem.element.innerHTML;
        if (text == "white") {
            this.myElem.style.setProperty('background-color', 'white');
        }
    }

```

---

<div class="post-metadata">

**Author:** ![jwx](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jwx/32/507_2.png) [@jwx](https://discourse.aurelia.io/u/jwx)\
**Post date:** [January 2, 2020, 4:26am UTC](https://discourse.aurelia.io/t/how-to-use-script-in-the-aurelia/3130/6 "2020-01-02T04:26:04Z")

</div>

This use case is a bit odd, but in any case it should be enough to just do

```auto
<template><div ref="myElem" style="background-color: ${myElem.innerText}">white</div></template>

```

No scripting necessary.

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [January 3, 2020, 8:54pm UTC](https://discourse.aurelia.io/t/how-to-use-script-in-the-aurelia/3130/7 "2020-01-03T20:54:52Z")

</div>

Can you explain how that value is set inside the `<template />`? I’m assuming this is a value that’s going to dynamically change and if you have access to that model/variable that the value is coming from then you can easily use the method that @jwx is suggesting but test against the model/variable rather than parsing the innerHTML. I’d also suggest using the `css` attribute rather than `style` if you are setting properties inside the attribute rather than a model (object literal). [See HERE for the style binding](https://aurelia.io/docs/binding/class-and-style#style).

---

<div class="post-metadata">

**Author:** ![davidlav](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davidlav/32/895_2.png) [@davidlav](https://discourse.aurelia.io/u/davidlav)\
**Post date:** [January 8, 2020, 4:20am UTC](https://discourse.aurelia.io/t/how-to-use-script-in-the-aurelia/3130/8 "2020-01-08T04:20:01Z")

</div>

Hi @adn, welcome! I think you have some fundamental misunderstandings about how Aurelia is intended to be used. I highly suggest going through the two official tutorials [here](https://aurelia.io/docs/tutorials) to learn about component-based architectures. They will teach you how to structure your application (how to separate your HTML from your JavaScript in different files) and how to use Aurelia to avoiding doing things like calling getElementById and setting innerHTML manually.