Webpage that shows a button on user entering a correct text string in an text entry field

Question

Update

Using the code from the 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]

Answer 1

This is just basic HTML?

Showing / hiding some DOM element based on a button click and the value of an input element requires some Javascrip:

1. Render the link as display: none to hide it

2. On button click:

   • If the user-input is correct, set display: block to show the element

---

Will it be case sensitive

Thats up to you, you can use toLowerCase() to convert the human-input to lowercase if your answer is also all lower.

---

Example, case insensitive.

As others already pointed out, a <button> inside an <a> isn't valid HTML. So I've removed the outer <button> and applied some styling to the <a>.

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>