1

Имеется класс 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 последнего объекта в массиве; ● При клике на “Вывести массив”... вывести массив в консоль . - здесь сложного ничего нет, выполнении данного пункта на ваше усмотрение, однако он был бы вам удобен для отладки и проверки работы скрипта.

12
  • Экземпляр класса может быть добавлен в список только в том случае, если этот класс наследует HtmlElement. Вы, скорее всего, хотите добавить не экземпляр класса, а какое-то из его свойств (имя? id?)
    – Darth
    8 ноя 2021 в 9:24
  • ● При клике на “добавить значения”, введенные пользователем данные, добавьте в объект в соответствующие свойства: ○ text ○ option Этот объект добавьте в общий массив, где будут хранится все вводимые значения, после чего очистите поля формы;
    – Buterok
    8 ноя 2021 в 9:27
  • Про список тут ничего не написано
    – Darth
    8 ноя 2021 в 9:28
  • Метод Add должен быть объявлен вне класса, как отдельная функция 8 ноя 2021 в 9:29
  • Про класс тоже кстати ничего не написано
    – Darth
    8 ноя 2021 в 9:29

1 ответ 1

0

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

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>

3
  • Благодарю за код и за важные комментарии. Пришлось только исправить у остальных кнопок тип на button, а то иначе массив обновляется и становится пустым. А остальное все хорошо работает)Спасибо)
    – Buterok
    8 ноя 2021 в 11:12
  • @Buterok Странно, это не должно быть никак связано с типом кнопок..
    – Darth
    8 ноя 2021 в 11:37
  • @Buterok а, да, я понял. submit отправляет форму, и когда вы нажимаете на эту кнопку у вас перезагружается страница. В данном случае вы верно поступили - кнопки, которые не должны отправлять форму, не должны быть submit. Но если, например, вам нужно отправить форму AJAXом, то это лечится навешиванием обработчика onsubmit с return false внутри.
    – Darth
    8 ноя 2021 в 11:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.