JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<main>
        <h1>Hello, stranger!</h1>
        <table>
            <tr>
                <td>
                    <div id="helloformfull">
                        <form>
                            <div id="helloformboxes">
                                <label for="fname">First name:</label><br>
                                <input type="text" id="fname" name="fname"><br>
                                <label for="lname">Last name:</label><br>
                                <input type="text" id="lname" name="lname"><br><br>
                            </div>
                            <button id="buttonid" type="button">Submit</button>
 
                            <script>
                                const button = document.getElementById("buttonid")
                                button.onclick =
                                let fname = document.getelementbyid("fname").value;
                                let lname = document.getelementbyid("lname").value;
                                function() {
                                    document.querySelector("#hellotext").innerText = "Why hello, " + fname + " " + lname + "! How the heck are ya?"
                                }
                            </script>
                        </form>
                    </div>
                </td>
                <td>
                    <h3 id="hellotext">
                        Hi there! Who are you?
                    </h3>
                </td>
            </tr>
        </table>
    </main>