Javascript button isn’t working on a WordPress HTML code?

Using the code from a different answer:

    const field = document.querySelector('#solution');
const link = document.querySelector('#link');

document.querySelector('#mybutton').addEventListener('click', (event) => {
    link.style.display = (field.value.toLowerCase() === 'answer')
        ? 'block'
        : 'none';
});
#link {
    display: none;
}

.a-as-button {
    display: block;
    width: 115px;
    height: 25px;
    background: #4E9CAF;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
}
<label for="solution"> Solution:</label>
<input type="text" id="solution" name="solution" placeholder="Enter Code Here"></input>
<button id='mybutton' type="button">Enter</button>

<a id='link' class='a-as-button' href="www.website.com/nextpage.html">
    Next Step
</a>

I’ve tried inputting this on a wordpress site, but can’t get it to work successfully, even though it runs fine on stackoverflow

My code test

Can anyone tell me if I’m missing something in implementing it?

The intended result is:

[Some text written puzzle, that the solution is a text string]

[Text field][Enter button]

~Upon Entry of Correct Text String, A New Button Appears~ [New Button, Linking to the Next Webpage]