Javascript function with substrings

Question

I attend a Javascript course and I have some exercises as homework. In one of them I have to create a Javascript function with the following role: when I press the button, the function should take the data from the first field of text and put it in the next 3 input fields (day, month and year).

I wrote the function, but it doesn't work. Can you tell me why? Thank you.

<!DOCTYPE html>
<html>
<head></head>
<body>
    <input type="text" value="20/12/2015" />
    <button onclick="calendar()">Push the button</button><br/>
    <input type="text" placeholder="day" /><br />
    <input type="text" placeholder="month" /><br />
    <input type="text" placeholder="year" />    
    <script>
    
    function calendar() {
        var x = "20/12/2015";
        var day = x.substring(0, 2);
        var month = x.substring(3, 5);
        var year = x.substring(6);
        document.getElementsByTagName("input")[1].innerHTML = day;
        document.getElementsByTagName("input")[2].innerHTML = month;
        document.getElementsByTagName("input")[3].innerHTML = year;
    }
        
    </script>

</body>
</html>

I don't know why someone downvoted this question. I guess this is a genuine doubt. At least he tried. — Satish Kumar
– Satish Kumar, Commented Apr 22, 2018 at 18:59

Nina Scholz · Accepted Answer · 2018-04-22 19:37:31Z

1

You need to use the value property to set/get the value of an <input> element.

function calendar() {
    var x = "20/12/2015";
        day = x.substring(0, 2);
        month = x.substring(3, 5);
        year = x.substring(6),
        inputs = document.getElementsByTagName("input");

    inputs[1].value = day;
    inputs[2].value = month;
    inputs[3].value = year;
}

<input type="text" value="20/12/2015" />
<button onclick="calendar()">Push the button</button><br/>
<input type="text" placeholder="day" /><br />
<input type="text" placeholder="month" /><br />
<input type="text" placeholder="year" />

edited Apr 22, 2018 at 19:37

answered Apr 22, 2018 at 18:56

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CertainPerformance · Accepted Answer · 2018-04-22 18:56:41Z

To set an input element's value, you have to assign to its value. This is also true for textarea elements.

Assign to innerHTML when dealing with pretty much any other kind of element, but not for inputs.

<!DOCTYPE html>
<html>
<head></head>
<body>
    <input type="text" value="20/12/2015" />
    <button onclick="calendar()">Push the button</button><br/>
    <input type="text" placeholder="day" /><br />
    <input type="text" placeholder="month" /><br />
    <input type="text" placeholder="year" />    
    <script>
    
    function calendar() {
        var x = "20/12/2015";
        var day = x.substring(0, 2);
        var month = x.substring(3, 5);
        var year = x.substring(6);
        document.getElementsByTagName("input")[1].value = day;
        document.getElementsByTagName("input")[2].value = month;
        document.getElementsByTagName("input")[3].value = year;
    }
        
    </script>

</body>
</html>

Collectives™ on Stack Overflow

Javascript function with substrings

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related