Seeking a solution to modify the text underneath a name form element on a squarespace.com website. This platform aids in website creation, but direct manipulation of the source code is not allowed. However, injecting JavaScript is permitted.
I have identified the IDs of the two elements I wish to alter. Upon inspecting through developer tools, it appears that these elements are labels with an input field and a corresponding string beneath, depicted as:
<label id="theLabel1">
<input type="text"></input>
"First Name"
</label>
The above HTML content is only visible following a click event on an element with the class name "theClickedClass".
Despite attempting to inject the provided jQuery snippet:
<script type="text/javascript">
$(function() {
$('.theClickedClass').click(function() {
$('#theLabel1').text("THE NEW TEXT");
});
});
</script>
The displayed HTML remains unchanged.
Assured of the functionality of the click event via a console.log test, even introducing a delay for label existence does not produce results.
Puzzled by this behavior, any insights or alternative approaches to updating the label text would be greatly appreciated.
Thank you.