Обратиться к методу класса из HTML

Question

Имеется класс User. У него есть два свойства. Нужно, чтобы при нажатии кнопки "Добавить значение" в выпадающий список добавлялся новый экземпляр класса(в самом списке должен быть массив этих экземпляров). JS:

var Users=new Array();
class User{
    constructor(text,option){
        this.text=text;
        this.option=option;
    }
    Add(){
        alert('Работает');
        var str=document.form.textarea.value;
        alert(str);
        var properties=new Array();
        properties=str.Split(',');
        alert(properties);
        var User=new User(properties[0],properties[1]);
        Users.push(User);
        UsersList.append(User);
        User.selected = true;
    }

    
}

HTML:

<form class="form">
        <input name="textarea" onkeypress="return isNumberKey(event)" placeholder="Поле1"></textarea> 
        <select id="UsersList">
            <option disabled>Список объектов</option>
        </select>
        <p><input type="button" value="Добавить значение" onclick="Add()"></p>
        <p><input type="submit" value="Пермешать"></p>
        <p><input type="submit" value="Вывести свойство"></p>
        <p><input type="submit" value="Вывести массив"></p>
        <!-- <input class="form__btn" type="button" onclick="Sum()" value="Добавить значения"> -->

</form>

Текст задания: Реализовать с помощью классов JS: ● Создайте на странице в форме 2 поля: текстовое, выпадающий список; ● Добавьте 4 кнопки под этими полями: ○ Добавить значения ○ Перемешать ○ Вывести свойство ○ Вывести массив ● При клике на “добавить значения”, введенные пользователем данные, добавьте в объект в соответствующие свойства: ○ text ○ option Этот объект добавьте в общий массив, где будут хранится все вводимые значения, после чего очистите поля формы; ● При клике на перемешать, (внезапно) перемешать массив объектов. ● При клике на “Вывести свойство” вывести в консоль свойство option последнего объекта в массиве; ● При клике на “Вывести массив”... вывести массив в консоль . - здесь сложного ничего нет, выполнении данного пункта на ваше усмотрение, однако он был бы вам удобен для отладки и проверки работы скрипта.

Answer 1

Ну, давайте по порядку

var Users = new Array(); 
// Дело вкуса, но я бы тут написал const users = [];

// Класс здесь не нужен, можно обойтись стандартным классом Object. 
// Но если в задании так написано - можно и класс.
class User{
    constructor(text,option){
        this.text=text;
        this.option=option;
    }
}

// В качестве метода класса вы не сможете вызвать эту функцию по onclick, 
// т.к. для этого нужен либо экземпляр класса, либо сделать этот метод static 
// - в любом случае нужно обращение к User.
// Короче, как написал @Alexander Chernin - это должна быть отдельная функция.
function Add(){
    // alert('Работает');
    console.log('Тоже работает и не надо нажимать ОК');
    
    // var str=document.form.textarea.value; 
    // document.form не существует. Есть document.forms, 
    // можно обратиться к вашей форме document.forms[0], 
    // но лучше использовать селектор:
    const form = document.querySelector('.form');

    const str=form.textarea.value; 
    console.log(str);
    
    // Я всё же считаю, что вы не совсем верно поняли задание 
    // и список - это не список пользователей, а список опций
    var option=form.optionslist.value;
    console.log(option);
    
    // var User= new User(str, option);
    // При таком объявлении с помощью var вы затираете 
    // в данной области видимости имя "User", 
    // которым у вас назывался ваш класс
    //  и на этой строчке (и внутри этой функции в целом с самого начала)
    // у вас User уже переменная без значения. (гуглить hoisting)
    
    const user = new User (str, option);
    // Это не обязательно, но среди разработчиков принято 
    // именовать классы с большой буквы, а экземпляры - с маленькой.
    // В данном случае решает вышеописанную проблему
    
    // В этой строчке всё было хорошо)
    Users.push(user);
    
    // Очистка формы
    form.textarea.value = "";
    form.optionslist.options[0].selected = true;
}


function printArray(){
  console.log(Users);
}

// Функции перемешивания массива и выведения свойства я оставил вам

<form class="form">
        <!-- onkeypress="return isNumberKey(event)" нет такой функции -->
        <input name="textarea" placeholder="Поле1">
        <!-- 
        </textarea> 
        Вы закрываете тег textarea, который не был открыт. input name= textarea - это не textarea, это другой тег и его не надо закрывать.
        --> 
        <select id="UsersList" name="optionslist">
            <!-- Судя по заданию, здесь всё же нужны заранее заготовленные опции -->
            <option value="" disabled selected>Список опций</option>
            <option value="Option 1">Опция 1</option>
            <option value="Option 2">Опция 2</option>
        </select>
        <p><input type="button" value="Добавить значение" onclick="Add()" /></p>
        <p><input type="submit" value="Пермешать"></p>
        <p><input type="submit" value="Вывести свойство"></p>
        <p><input type="submit" value="Вывести массив" onclick="printArray()"></p>

</form>

БЛОГ НА HUSL

Обратиться к методу класса из HTML

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