Lesson: 12 | The attribute onchange

Notes
Video

Notes

The lightning-input field uses the onchange attribute to listen for a change to its value. When the value changes, the handleChange function in the JavaScript file executes.

Notice that to bind the handleChange function to the template, we use the same syntax, {handleChange}.

myName.html

<template>
    <p>My name is: {name}!</p>
    <lightning-input label="name" value={name} onchange={nameHandler}></lightning-input>
</template>

myName.js

import { LightningElement } from 'lwc';

export default class MyName extends LightningElement {
    name = 'John Carter';

    nameHandler(event) {
        this.name= event.target.value;
    }
}

Prev You need to login to have access to the quizzes. Next

Mastered by 34 users.

Lightning Web Components

A. Component Reference (27 lessons)

B. Lightning Web Components | Utilities (11 lessons)

C. Lightning Web Component Guide (41 lessons)

D. Java Script Methods for LWC (23 lessons)

E. HTML (18 lessons)

F. JavaScript (19 lessons)

Go to top

Login to your account

Lesson: 12 | The attribute onchange

Notes

myName.html

myName.js

Lightning Web Components