problem grabbing input value and putting it into span

Question

I know there are already some discussions about this topic, but I can’t find the right solution.In all the approaches you just grab your span and your inputfield, then call a new variable input value and then ,using text content = value it should work, but in my case it doesn’t.Probably I’m missing something.This is my html

<div class="wrapper" id="wrapper">
    <div class="settings-panel" id ="settings-panel">
        <div class="settings-panel-wrapper">
        <!----close button !---->
            <div class="firstline">
            <h3>Clock settings</h3>
            <div id="close-button">
                <img id="close-image" src="{% static 'media/cancel.png' %}" alt="cancel">
            </div>
            </div>
            <hr>
        <!----close button !---->
            <div id="time-box">
                <span class="description">Time(in minutes)</span>
                <div class="timeslots" id="timeslots">
                    <div id="pomodoro">
                        <label>Pomodoro</label>
                        <input  id="time-study-input "type="number" min="0"step="1" value="40">
                    </div>
                    <div id="Short-Break">
                        <label>Short Break</label>
                        <input id="short-break-input "type="number" min="0" step="1" value="5">
                    </div>
                    <div id="Long-Break">
                        <label>Long Break</label>
                        <input id="long-break-input "type="number" min="0" step="1" value="15">
                    </div>
                </div>
                <button id="save-changes" onclick="savechanges()">Save changes</button>
            </div>
        </div>
    </div>
    <div class="clock-container" id ="clock-container">
        <div class="features-clock">
        <button id="settings-button">Settings</button>
        </div>
        <div class="countdown-container">
        <span id=countdown-timer-study></span>
        </div>
    </div>
</div>

this is script.js(probably you don’t need css)

const settings_panel = document.getElementById("settings-panel");
const settings_button= document.querySelector("#settings-button");
const wrapper = document.getElementById("wrapper");
const close_button = document.getElementById("close-button");
const body = document.querySelector("body");
const big_wrapper = document.getElementById("big-wrapper");
var time_study_input = document.getElementById("time-study-input");
var short_break_input = document.getElementById("short-break-input");
var  long_break_input = document.getElementById("long -break-input");
var  countdown_timer_study= document.getElementById("countdown-timer-study");


settings_button.addEventListener("click", ()=>{
    settings_panel.style.display="block";
    wrapper.style.backgroundColor ="rgba(0,0,0,0.3)";
})

close_button.addEventListener("click", () => {
    settings_panel.style.display = "none";
    wrapper.style.backgroundColor = "rgba(221, 217, 217, 0)";
})

function savechanges(){
    var time_study_value = time_study_input.value;
    countdown_timer_study.textContent =time_study_value;
    settings_panel.style.display = "none";
    wrapper.style.backgroundColor = "rgba(221, 217, 217, 0)";
}

as you can see I am trying to build a pomodoro app so when the user wants to customize the timer I can grab the input value and insert it into the span that is going to represent the time limit(as you can see I also setup a default value of 40, is this the right way to do it?).I am trying to improve my front-end skills which are definitely terrible, so any tip about code simplification (pointing out which parts are redundant or inefficient) is very welcome.

Answer 1

Your problem is extremely subtle. You have an extra space at the end of the id time-study-input. Try this:

<div id="pomodoro">
    <label>Pomodoro</label>
    <input id="time-study-input" type="number" min="0"step="1" value="40">
</div>