How do I... Show a submit button when a text box is populated (MVC)

See more:

C#

Javascript

ASP.NET-Core

I'm taking the next step in my project and adding some behaviour using Javascript. I know that I need to split the JS onto a separate script and reference that file but I just want to get it working first.

Now the first script works on load and sets the header text and save button based on whether its a new or an existing record.

Now I am trying to get the save button to only show once the text box is populated.
F12 Gives me this error:

Uncaught TypeError: txtPartType.Value is undefined

@model Models.ViewModels.PartTypeViewModel
@{
    ViewData["Title"] = "Rabso Solutions: Manage Part Types";
    Layout = "~/Views/_Shared/_Layout.cshtml";
}

<div class="card">
    <div class="card-header" id="managePartType">Placeholder Text</div>
    <div class="card-body">
        @using (Html.BeginForm("Save", "PartType"))
        {
            @Html.HiddenFor(x => x.PartType.Id)
            <div class="form-group">
                @Html.LabelFor(x => x.PartType.PartTypeName)
                @Html.TextBoxFor(x => x.PartType.PartTypeName, new { @class = "form-control", @id = "partTypeName", onkeyup = "EnableSaveButton()" })
            </div>
            <button class="btn btn-primary btn-block" id="savePartType">Placeholder Text</button>
        }
    </div>
</div>

<hr />

<div class="card">
    <div class="card-header">List Of Current Part Types</div>
    <div class="card-body">
        <table class="table table-striped table-bordered">
            <thead class="thead-dark">
                <tr>
                    <th>#</th>
                    <th>Part Type Name</th>
                    <th>Edit</th>
                </tr>
            </thead>
            @foreach (var item in Model.PartTypes)
            {
            <tr>
                <td>@item.Id</td>
                <td>@item.PartTypeName</td>
                <td>
                    class="fa fa-pencil">
                        @Html.ActionLink("Edit/Details", "Manage", new { id = item.Id })
                    
                </td>
            </tr>
            }
        </table>
    </div>
</div>

<script>
    window.onload = function SetText () {
    if (@Model.PartType.Id === 0) {
        this.document.getElementById("managePartType").innerHTML = "Create A New Part Type";
        this.document.getElementById("savePartType").innerHTML = "Save New Part Type";
        }
        else {
        this.document.getElementById("managePartType").innerHTML = "Update Existing Part Type";
        this.document.getElementById("savePartType").innerHTML = "Save Updated Part Type";
        }
        document.getElementById("savePartType").disabled = true;
    };

    function EnableSaveButton() {
        const btnSave = this.document.getElementById('savePartType');
        const txtPartType = this.document.getElementById('partTypeName');
        if (txtPartType.Value.Trim() !== '') {
            btnSave.disabled = false;
        } else {
            btnSave.disabled = true;
        }
    }

</script>

What I have tried:

I have tried rewriting, changing the approach, trying different on event handlers.