Using Javascript to set input to readonly

Question

I'm trying to use Javascript to set input fields to readonly, if they do not contain any value, i.e if they are null. this is my code, I'm not receiving any errors from the debugger, but it simply refuses to work, could someone

//checkScore();
function checkScore(){
    document.getElementById('score_row1').readonly = true;
    var scores = document.getElementsByClassName("score_holder");
    var i;
    for(i=0; i<scores.length; i++){
        if(scores[i].value!=null){
            scores[i].readonly="readonly";
        }
    }
}

<!doctype html>
<html>
    <head>
    </head>

    <body onload="checkScore()">


        <table align="center" cellpadding="3">
            <tr valign="baseline">
                <td colspan="3" align="center" id="course_row25" value="EDU-101"><strong>EDUCATION COURSES</strong></td>
            </tr>
            <tr>
                <td align="right">
                    <input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
                </td>
                <td>&nbsp;</td>
                <td>
                    <input type="text" value="30" size="5" class="score_holder" />
                </td>
            </tr>
            <tr>
                <td align="right" id="course_row1" name="course_row1" value="EDU-101">
                    <input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
                </td>
                <td>&nbsp;</td>
                <td>
                    <input type="text" size="5" class="score_holder" />
                </td>
            </tr>
            <tr>
                <td align="right" id="course_row1" name="course_row1" value="EDU-101">
                    <input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
                </td>
                <td>&nbsp;</td>
                <td>
                    <input type="text" value="10" size="5" class="score_holder" />
                </td>
            </tr>

        </table>
    </body>
</html>

scores[i].readonly="readonly"; — The readonly DOM property is a boolean. It can have the values true and false. "readonly" works only because the string is cast to a boolean. — Quentin
– Quentin, Commented Feb 28, 2017 at 14:04
as @Quentin mentioned, regarding here it is scores[i].readOnly=true; — Petri Pakkanen
– Petri Pakkanen, Commented Feb 28, 2017 at 14:07
@Quentin @ Petri I just adjusted my code to that, but it still didn't work — MGS
– MGS, Commented Feb 28, 2017 at 14:15

Clyde Lobo · Accepted Answer · 2017-02-28 14:24:24Z

2

First, there is no element with the id score_row1 in your HTML, so your js will throw an error and fail.

Also the property is readOnly and not readonly

So this scores[i].readonly="readonly"; should be scores[i].readOnly="readonly";

Created a working demo here

answered Feb 28, 2017 at 14:24

Clyde Lobo

9,1747 gold badges37 silver badges63 bronze badges

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

Comments

Quentin · Accepted Answer · 2017-02-28 14:04:20Z

1

The value of a text input will always be a string.

If nothing has been typed in it, then the value will be "". It will never be null.

answered Feb 28, 2017 at 14:04

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

1 Comment

MGS Over a year ago

noted, but what I'm trying to achieve is to set the input to readOnly. since none of the values are equal to null, that should imply that all the input fields would then be set to readOnly, but that's not the case

Collectives™ on Stack Overflow

Using Javascript to set input to readonly

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related