How to update HTML element in real time in Service Catalog

[csorrent]

Hello,

Currently I have a requirement to update an HTML element present on a Catalog Item based on what the user inputs in the fields below. See screenshot:

Basically, if a user types 'ServiceNow' in the Notification Title field, the phrase "THIS IS A TEST" will be updated to read "ServiceNow". I would imagine this requires an onChange client script and some JavaScript, but it's my first time creating functionality like this and some direction would be great. Thank you!

[csorrent]

Based on some googling, im trying to utilize DOM Manipulation by using document.getElementById() in an on change client script. On paper I feel like this should be working, but it still is not. Any help would be great!

Client Script

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading) {
        return;
    }

    //Get value of Notification Title field
    newValue = g_form.getValue('announcement_title');

	//Get ID of html element being replaced
    var myDiv = document.getElementById('div_announcement_title');

	//Replace html element with user entered text
    myDiv.innerHTML = newValue;
	
}

HTML

<div class="announcement-wrapper ng-scope">
<div class="ng-scope" style="background-color: #006ed5; color: #ffffff; text-align: left;">
<div class="announcement-container linktype-none">
<div class="text-container">
<div class="icon-title" style="justify-content: flex-start;">
<div class="icon">&nbsp;</div>
<div id="div_announcement_title" class="title-announcement ng-binding announcement-left">THIS IS A TEST</div>
</div>
<p id="p_announcement_summary" class="content ng-binding">Check out this test info</p>
</div>
</div>
</div>
</div>