Не очищаются данные с прошлого вызова метода js

Question

Всем привет!

Подскажите, пожалуйста, как вызвать метод sayHello() только для одного объекта?

Нужно, чтоб при клике на button в консоле отоборажалось имя только одного объекта.

Например, кликнув на <button class="Btn" onclick="something(this)">person</button>, а после на button с именем sayHello(), в консоле должно отображаться

Hello, my name is Liza!

На данном этапе основная ОШИБКА - после нажатия всех button выводяться name всех объектов, т е eсли кликнуть на <button class="Btn" onclick="something(this)">person</button>, после button с именем sayHello(), после на <button class="Btn" onclick="something(this)">animal</button> и опять на sayHello() - вместо вывода name объекта Animal выведет оба name:

2 newscript.js:8 Hello, my name is Liza!`
newscript.js:8 Hello, my name is Kuzia!

function Create (name) {
    this.name = name;
}


Create.prototype.sayHello = function () {
    return console.log(`Hello, my name is ${this.name}!`);
}

function Person (name, job) {
    Create.call(this, name);
    this.job = job;
}


Person.prototype = Object.create(Create.prototype);
Person.prototype.constructor = Create;


function Animal (name, color) {
    Create.call(this, name);
    this.color = color;

}

Animal.prototype = Object.create(Create.prototype);
Animal.prototype.constructor = Create;

function Doctor (name, job, title) {
    Person.call(this,name, job);
    this.title = title;
}

Doctor.prototype = Object.create(Person.prototype);
Doctor.prototype.constructor = Person;

let properties = document.getElementById('properties');


let btnHello = document.createElement('button');
btnHello.innerHTML = 'Say hello';
btnHello.setAttribute('id', 'hello');
properties.appendChild(btnHello);

let hello = document.getElementById('hello');
let n = document.getElementsByTagName('button');

function something(passed) {

    if (passed.innerHTML === 'person'){
        passed = new Person('Liza', 'beauty master');
    } else if (passed.innerHTML === 'doctor'){
        passed = new Doctor('Mark', 'doctor', 'surgery');
    } else if (passed.innerHTML === 'animal'){
        passed = new Animal('Kuzia', 'Brown');
    }


    hello.addEventListener('click', () => {
            passed.sayHello()
    })

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/new.css">
</head>
<body>
<div>
    <div>
        <div id="properties"></div>
    </div>

    <button class="Btn" onclick="something(this)">person</button>
    <button class="Btn" onclick="something(this)">doctor</button>
    <button class="Btn" onclick="something(this)">animal</button>

</div>
<script src="js/newscript.js"></script>
</body>
</html>

Answer 1

Текущий код конечно конкретно запутанный... Но одно из решений: вынести выбранного персонажа в глобальное пространство. И там же слушателя повесить на кнопку. В функции лишь менять этого персонажа

ЗЫ: тут не учтён будет тот факт, что можно нажать на кнопку до того, как персонаж будет выбран и надо установить что-то дефолтное

let chooserPerson = null;
function something(passed) {

    if (passed.innerHTML === 'person'){
        chooserPerson = new Person('Liza', 'beauty master');
    } else if (passed.innerHTML === 'doctor'){
        chooserPerson = new Doctor('Mark', 'doctor', 'surgery');
    } else if (passed.innerHTML === 'animal'){
        chooserPerson = new Animal('Kuzia', 'Brown');
    }  
}

hello.addEventListener('click', () => {
    chooserPerson.sayHello()
})

БЛОГ НА HUSL

Не очищаются данные с прошлого вызова метода js

Ответы (1 шт):