Lesson: 15 | Events

HTML

<template>
    <div>
      <h1>{greeting}{name}</h1>
      <input type="text" value={name} onchange={handleChange}/>
      <button onclick={handleClick}>Say Hello</button>
      <select onchange={handleSelectChange}>
        <option value="en">English</option>
        <option value="fr">French</option>
        <option value="es">Spanish</option>
      </select>
    </div>
  </template>

Java Script

import { LightningElement } from 'lwc';

export default class EventExample extends LightningElement {
   name = 'World';
   greeting = 'Hello';

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

  handleClick() {
    this.greeting = `Hello, ${this.name}!`;
  }

  handleSelectChange(event) {
    const language = event.target.value;
    if (language === 'en') {
      this.greeting = 'Hello';
    } else if (language === 'fr') {
      this.greeting = 'Bonjour';
    } else if (language === 'es') {
      this.greeting = 'Hola';
    }
  }
}

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

Mastered by 6 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: 15 | Events

HTML

Lightning Web Components