Значение не определено при отправке в firebase

Question

Здравствуйте. У меня есть ползунок на моей веб-странице в диапазоне от 1 до 10:

 <div class="slidecontainer">
                <p  style="font-size: large; font-weight: bold;"> Aantal sets: <span id="dynamicSet" ></span></p>
                <input type="range" min="1" max="10" value="50" class="slider" id="myRange">
 </div>
<button  onclick = "window.location.href = '#close'; collection();" href="#close" id="submitButton" class="tester2"  > Submit </button>

Количество ползунков, которые я пытаюсь сохранить в переменной setAmount.

var setAmount;
output.innerHTML = slider.value
    update=()=>{
        output.innerHTML = slider.value; 
        // Display the default slider value
        console.log(slider.value);
        setAmount = slider.value;
        console.log(setAmount);
    }

// Update the current slider value (each time you drag the slider handle)
slider.addEventListener('input', update);

Моя консоль показывает изменение значения при перемещении ползунка. Я пытаюсь сохранить сумму в setAmount. Но он возвращает неопределенное. Sldier является частью моей формы. и когда администратор нажимает кнопку «Отправить», я пытаюсь отправить его в мою базу данных Firebase. Но кажется, что прежде чем я смогу зайти так далеко, я не смогу даже сохранить его должным образом. Как и когда я сохраняю его в моей БД, он возвращает неопределенное значение.

function writeData(){
    firebase.database().ref("Exercise").set({
        setAm: setAmount, 
    });
}
function collection(){
    writeData();
}

в чем может быть причина этого?

РЕДАКТИРОВАТЬ: Сделал код ручки: https://codepen.io/zakaria250/pen/zYvvXjr

Answer 1

Трудно быть на 100% уверенным, используя только те фрагменты кода, которыми вы поделились, но причиной вашей проблемы, вероятно, является тот факт, что ваша форма отправлена ​​до запуска метода Firebase set().

Как Фактически, вы объявляете свою кнопку следующим образом:

<button onclick = "window.location.href = '#close'; collection();" href="#close" id="submitButton" class="tester2"  > Submit </button>

т.е. без какого-либо атрибута type.

Как указано в спецификации W3 для типов кнопок , «отсутствующим значением по умолчанию является состояние кнопки« Отправить »» и «если атрибут type находится в состоянии кнопки« Отправить », этот элемент, в частности, является кнопкой отправки ».

Итак, если вы добавите к своей кнопке тип button, как показано ниже, это должно решить вашу проблему.

<button type="button" onclick = "window.location.href = '#close'; collection();" href="#close" id="submitButton" class="tester2">Submit</button>