Question: Javascript Document.getElementById returning null

Question

Javascript Document.getElementById returning null

Answers 1
Added at 2016-12-31 18:12
Tags
Question

I'm new to MVC and AJAX so this is probably a simple mistake I am making but using the code below, I am getting the following error trying to getElementById("txtCount").value:

<div class="row">
    <div class="col-sm-4">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h5 style="font-weight:bold;">Parameters</h5>
            </div>
            <div class="panel-body" id="parameters">
                <form class="form-horizontal" id="frmParameters">
                    <div class="form-group">
                        <label for="txtCount" class="col-sm-4 col-form-label">Repeat</label>
                        <input type="number" min="1" max="100" step="1" id="txtCount" value="@Model.Count" class="input-sm col-sm-7" />
                    </div>
                    @if (Model.Grammar.SupportsMaxLength)
                    { 
                        <div class="form-group">
                            <label for="txtMaxLength" class="col-sm-4 col-form-label">Max Length</label>
                            <input type="number" min="1" max="100" step="1" id="txtMaxLength" value="@Model.MaxLength" class="input-sm col-sm-7" />
                        </div>
                    }                        
                    <button name="btnGenerate" class="btn btn-primary pull-right" onclick="Generate();">Generate</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    function Generate() {
    var data = { count: document.getElementById("txtCount").value, maxLength: document.getElementById("txtMaxLength").value };
    }
</script>

If I change:

    var data = { count: document.getElementById("txtCount").value, maxLength: document.getElementById("txtMaxLength").value };

to:

    var data = { count: document.getElementById("txtCount").value};

I don't get the error anymore.

Answers to

Javascript Document.getElementById returning null

nr: #1 dodano: 2016-12-31 18:12

Your code looks fine. I think you are getting the error when your code tries to execute this line

document.getElementById("txtMaxLength").value

Because in your view you are rendering this element when some if condition returns true. So it is possible that your view does not have this input element at all and you are trying to read that! (Check the view source of the page and search for input with txtMaxLength id.

The best solution is to check it exists before trying to read the value.

var data = {
              id: "@Model.Id",
              count: document.getElementById("txtCount").value,
              maxLength: null  // or whatever default value you want
            };
if (document.getElementById("txtMaxLength")) {
    data2.maxLength = document.getElementById("txtMaxLength").value;
}

Or if you are using jQuery library, it is easy

var data = {
              id: "@Model.Id",
              count: $("#txtCount").val(),
              maxLength:$("#txtMaxLength").val()
          };
Source Show
◀ Wstecz