Блог

Главная - Вопросы по программированию - Извлечение значений/текста из выпадающего меню

Извлечение значений/текста из выпадающего меню

#javascript #html

Вопрос:

Я работаю над заданием для курса javascript, чтобы пользователь ввел имя и сделал выбор из выпадающего меню, затем нажмите кнопку, чтобы добавить ввод/выбор на карту, затем нажмите другую кнопку, чтобы отобразить данные карты. После написания кода я могу ввести имя и сделать выбор, но нажатие кнопок ничего не делает. Попробовал отладку, и я продолжаю получать странные ошибки. Самая новая ошибка находится в строке объявления ADDBUTTON, в которой говорится, что document.getElementById не является функцией. Я также получаю ошибку в блоке ADDBUTTON.onclick, из-за которой я не могу назначить нулевую переменную.

У кого-нибудь есть какие-нибудь мысли?

 ...

<!DOCTYPE html>

<html>
    <head>
        <title>Camp Whack-a-Doo Chore List</title>
    </head>

    <body>
    
        <h1>Add to the Chore List</h1>
        
        <p>Enter the Camper's name and their assigned chore, then click the Add button.
        Click the Display button to view the list.</p>
        
        <label for = "name">Camper Name</label>
        <input type = "text" id = "name" /><br/>
        
        <label for = "chore">Choose a Chore</label>
        <select id = "chore">
            
            <option value = "frontSweep">Front Room Sweep</option>
            <option value = "backSweep">Back Room Sweep</option>
            <option value = "outsideGrounds">Outside Grounds</option>
            <option value = "toilet">Clean Toilet</option>
            <option value = "sink">Clean Sink</option>
            <option value = "trashSupplies">Trash Patrol and Supplies</option>
            
        </select><br/>
        
        <button id = "btnToAddToCL">Add to Chore List</button>
        <button id = "btnToDisplayCL">Display Chore List</button>
        
        <div id = "result"></div>
        
    <script>
    
    const ADDBUTTON = document.getElementByID('btnToAddToCL');
    const DISPLAYBUTTON = document.getElementByID('btnToDisplayCL');
    
    let choreList = new Map();
    
    ADDBUTTON.onclick = function(){
    
        let name = document.getElementByID('name');
        
        let c = document.getElementByID('chore').value;
        let chore = c.target.options[c.selectedIndex].text;
        
        choreList.set(name.value, chore.value);
        
        name.value = "";
        chore.value = "";
    
    };
    
    DISPLAYBUTTON.onclick = function(){
    
        let out = "";
        
        for(let x of choreList.entries()){
        
            out  = x[0]   ": "   x[1];
            out  = "<br/>";
        
        }
        
        document.getElementByID('result').innerHTML = out;
    
    }
    
    </script>
    
    </body>

</html>
...

Комментарии:

1. document.getElementByID isn't a function …да, это так document.getElementById . JS чувствителен к регистру. developer.mozilla.org/en-US/docs/Web/API/Document/… . Смотрите также это — так гораздо легче найти ответ.

2. error in the ADDBUTTON.onclick block that I can't assign a null variable …пожалуйста, всегда вставляйте точное сообщение об ошибке. Не сокращайте, не перефразируйте и не вносите никаких других изменений, тогда нет никакой двусмысленности. Кроме того, убедитесь, что предоставленная вами информация точно указывает нам, на какой линии это происходит. Сказать, что это находится в пределах определенного блока, недостаточно точно.

Ответ №1:

Пожалуйста, проверьте этот фрагмент, я исправил синтаксические ошибки, и теперь он работает.

Что было не так?

document.getElementByID должно быть document.getElementById

document.getElementById('chore').value должно быть так document.getElementById('chore') же, как в этой ситуации вам нужен весь объект элемента, а не только значение.

c.tagrets.options[c.selectedIndex].text; должно быть так c.options[c.selectedIndex].text; же, как c и сама цель.

 <!DOCTYPE html>

<html>
    <head>
        <title>Camp Whack-a-Doo Chore List</title>
    </head>

    <body>
    
        <h1>Add to the Chore List</h1>
        
        <p>Enter the Camper's name and their assigned chore, then click the Add button.
        Click the Display button to view the list.</p>
        
        <label for = "name">Camper Name</label>
        <input type = "text" id = "name" /><br/>
        
        <label for = "chore">Choose a Chore</label>
        <select id = "chore">
            
            <option value = "frontSweep">Front Room Sweep</option>
            <option value = "backSweep">Back Room Sweep</option>
            <option value = "outsideGrounds">Outside Grounds</option>
            <option value = "toilet">Clean Toilet</option>
            <option value = "sink">Clean Sink</option>
            <option value = "trashSupplies">Trash Patrol and Supplies</option>
            
        </select><br/>
        
        <button id = "btnToAddToCL">Add to Chore List</button>
        <button id = "btnToDisplayCL">Display Chore List</button>
        
        <div id = "result"></div>
        
    <script>
    
    const ADDBUTTON = document.getElementById('btnToAddToCL');
    const DISPLAYBUTTON = document.getElementById('btnToDisplayCL');
    
    let choreList = new Map();
    
    ADDBUTTON.onclick = function(){
    
        let name = document.getElementById('name');
        
        let c = document.getElementById('chore');
        let chore = c.options[c.selectedIndex].text;
        
        choreList.set(name.value, chore);
        
        name.value = "";
        chore.value = "";
    
    };
    
    DISPLAYBUTTON.onclick = function(){
    
        let out = "";
        
        for(let x of choreList.entries()){
        
            out  = x[0]   ": "   x[1];
            out  = "<br/>";
        
        }
        
        document.getElementById('result').innerHTML = out;
    
    }
    
    </script>
    
    </body>

</html>

Комментарии:

1. Хороший качественный ответ объяснил бы конкретно, что вы изменили и — что наиболее важно — почему вы это изменили. Не оставляйте это на догадки и не поощряйте слепую культуру копирования и вставки без обучения. Это дало бы вам преимущество…

2. @ADyson Спасибо 🙂 Я обновил свой ответ, указав, что было неправильно в исходном коде. Пожалуйста, помогите мне с голосованием.

3. О боже, я подумал, что это было что-то глупое, чего я не мог видеть. Я ценю свежий взгляд и помощь!

4. @Кайла, пожалуйста, проголосуйте и отметьте как можно более полный ответ, как только вы получили решение.

Ответ №2:

Почти Идеально

Поэтому я просто просмотрел некоторые варианты написания «getElementById», исправил и использовал вашу идею установки переменных элементов перед запуском кода.

Как я отладил это, я прокомментировал все вещи и раскомментировал по одному, проверяя вещи с помощью console.log(value) , чтобы увидеть, смог ли я получить значение.

Это работающая версия.

     const ADDBUTTON = document.getElementById('btnToAddToCL');
    const DISPLAYBUTTON = document.getElementById('btnToDisplayCL');
    const CHORES = document.getElementById('chore');
    const NAME = document.getElementById('name');
    
    const choreList = new Map();
    
    ADDBUTTON.onclick = function() {
    
        console.log('add button click')
        
        const camper = NAME.value;
        const chore = CHORES.options[CHORES.selectedIndex].text;
        
        choreList.set(camper, chore);
        
        NAME.value = "";
        CHORES.selectedIndex = 0;
    };

    DISPLAYBUTTON.onclick = function(){
    
        let out = "";
        
        for(let x of choreList.entries()){
        
            out  = x[0]   ": "   x[1];
            out  = "<br/>";
        
        }
        
        document.getElementById('result').innerHTML = out;
    
    } 
         <h1>Add to the Chore List</h1>
        
        <p>Enter the Camper's name and their assigned chore, then click the Add button.
        Click the Display button to view the list.</p>
        
        <label for = "name">Camper Name</label>
        <input type = "text" id = "name" /><br/>
        
        <label for = "chore">Choose a Chore</label>
        <select id = "chore">
            
            <option value = "frontSweep">Front Room Sweep</option>
            <option value = "backSweep">Back Room Sweep</option>
            <option value = "outsideGrounds">Outside Grounds</option>
            <option value = "toilet">Clean Toilet</option>
            <option value = "sink">Clean Sink</option>
            <option value = "trashSupplies">Trash Patrol and Supplies</option>
            
        </select><br/>
        
        <button id = "btnToAddToCL">Add to Chore List</button>
        <button id = "btnToDisplayCL">Display Chore List</button>
        
        <div id = "result"></div>

Комментарии:

1. Спасибо за помощь! Я подумал, что это было что-то глупое, чего я просто не видел.

2. вы должны проверить реакцию

Метки: