以下是一个使用JavaScript和HTML的示例代码,实现了当表单输入发生变化时,渲染一个按钮的功能:
HTML代码:
表单变化时渲染按钮
JavaScript代码(script.js):
function checkForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
if (name !== "" && email !== "") {
renderButton();
} else {
removeButton();
}
}
function renderButton() {
var button = document.createElement("button");
button.innerHTML = "提交";
button.onclick = submitForm;
document.getElementById("buttonContainer").appendChild(button);
}
function removeButton() {
var buttonContainer = document.getElementById("buttonContainer");
if (buttonContainer.firstChild) {
buttonContainer.removeChild(buttonContainer.firstChild);
}
}
function submitForm() {
// 处理表单提交的逻辑
console.log("表单已提交");
}
这段代码中,checkForm
函数在每次输入框的值发生变化时被调用。它获取了姓名和邮箱的值,并根据这些值来决定是否渲染按钮。如果姓名和邮箱都不为空,则调用renderButton
函数来创建一个按钮,并将其添加到buttonContainer
div元素中。如果任何一个输入框为空,则调用removeButton
函数来删除已渲染的按钮。submitForm
函数用于处理表单提交的逻辑,这里只是简单地在控制台输出一条消息。
通过这段代码,当用户在输入框中输入内容时,如果姓名和邮箱都不为空,就会在页面上渲染一个提交按钮。当用户删除输入框中的内容时,按钮会被移除。