Just trying to understand whats going on here. Obviously a quirk of javascript, hoping someone can help explain.

HTML:

<input type="file" asp-for="TitleImageUrl" value="@_loc[Model.AddTitleImageButton]" onchange="preview('CardDynamicImage')" />

<img class="card-img-top embed-responsive-item" id="CardDynamicImage" src="@Model.CardTitleImage" onerror="this.src=''">

JAVASCRIPT THAT WORKS:

function preview(elementId) {
<!--The id of the element is hard coded directly. Ignore the value passed in.-->
            CardDynamicImage.src = URL.createObjectURL(event.target.files[0]);
    }
}

JAVASCRIPT THAT DOES NOT WORK: Why?

function preview(elementId) {
<!--Trying to pass in the id of the element does not work.-->
            elementId.src = URL.createObjectURL(event.target.files[0]);
}