---
id: 62a3c2fccf186146b59c6e96
title: Step 36
challengeType: 0
dashedName: step-36
---

# --description--

`button1` rappresenta il primo elemento `button`. Questi elementi possiedono una proprietà particolare chiamata `onclick`, che puoi usare per determinare cosa accade quando qualcuno clicca il pulsante.

Puoi accedere alle proprietà in JavaScript in un paio di modi diversi. Il primo è con la <dfn>dot notation</dfn> (notazione con punto). Il modo per accedere alla proprietà `onclick` di un elemento button sarà:

```js
button.onclick
```

Usa la dot notation per impostare la proprietà `onclick` di `button1` sulla variabile `goStore`. Questa variabile corrisponderà a qualcosa che scriverai più avanti. Nota che `button1` è già dichiarata, quindi non hai bisogno di usare `let` o `const`.

# --hints--

Dovresti usare la dot notation per accedere alla proprietà `onclick` di `button1`.

```js
assert.match(code, /button1\.onclick/);
```

Non dovresti usare `let` o `const`.

```js
assert.notMatch(code, /(let|const)\s+button1\.onclick/);
```

Dovresti impostare la proprietà `onclick` di `button1` sulla variabile `goStore`.

```js
assert.match(code, /button1\.onclick\s*=\s*goStore/);
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>RPG - Dragon Repeller</title>
</head>
<body>
    <div id="game">
        <div id="stats">
            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
        </div>
        <div id="controls">
            <button id="button1">Go to store</button>
            <button id="button2">Go to cave</button>
            <button id="button3">Fight dragon</button>
        </div>
        <div id="monsterStats">
            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
        </div>
        <div id="text">
            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
        </div>
    </div>
    <script src="./script.js"></script>
</body>
</html>
```

```css
body {
    background-color: darkblue;
}

#text {
    background-color: black;
    color: white;
    padding: 10px;
}

#game {
    max-width: 500px;
    max-height: 400px;
    background-color: lightgray;
    color: white;
    margin: 0 auto;
    padding: 10px;
}

#controls, #stats {
    border: 1px solid black;
    padding: 5px;
    color: black;
}

#monsterStats {
    display: none;
    border: 1px solid black;
    padding: 5px;
    color: white;
    background-color: red;
}

.stat {
    padding-right: 10px;
}
```

```js
let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];

const button1 = document.querySelector('#button1');
const button2 = document.querySelector("#button2");
const button3 = document.querySelector("#button3");
const text = document.querySelector("#text");
const xpText = document.querySelector("#xpText");
const healthText = document.querySelector("#healthText");
const goldText = document.querySelector("#goldText");
const monsterStats = document.querySelector("#monsterStats");
const monsterName = document.querySelector("#monsterName");
const monsterHealthText =document.querySelector("#monsterHealth");

--fcc-editable-region--
// initialize buttons

--fcc-editable-region--
```
