javascript - 单击按钮后消息出现在同一个 div 中

Question

这是我的表格:

<div class="notification">
            <p style="font-family: 'Roboto', sans-serif;">Enter your email to notify you when the app you selected become available.</p>
                <form class="form-inline">
                    <div class="form-group">
                        <label for="inputemail"></label>
                        <input type="email" class="form-control" id="inputemail" placeholder="Email Address" size="25">
                    <button type="submit" class="btn btn-primary" onclick="displayMessage()">NOTIFY ME</button>
                    <small id="emailHelp" class="form-text text-muted">*we will never sell<br>your email</small>
                </div>
            </form>
        </div>

当我点击 NOTIFY ME 按钮时，我希望我的表单消失并且我想在该通知 div 中放置一条消息，如下所示:message after click 执行此操作的最佳方法是什么？

Answer 1

你需要明白当你点击按钮时浏览器会刷新页面所以你需要添加一个监听并防止默认。从那里我简单地通过 Id 获取了 div 元素并更改了 innnerHTML 属性。

<script>

let string = 'We will email you when your app becomes available'

function handleClick(event){
  event.preventDefault();
  let notifDiv = document.getElementById("notifications");
  notifDiv.innerHTML = string
}

document.getElementById("notifications").addEventListener("click", handleClick)

</script>