Question

我正在为表单添加交互性。

以下是HTML的摘录：

<label for="name" id="nameLabel">Name:</label>
<input type="text" id="name" name="user_name">

表单底部有一个按钮，注册＆＃39;。如果按下按钮并且名称字段为空，我想添加一条警告消息，提醒用户输入他们的名字。我想通过修改标签来做到这一点。

我在尝试选择文本字段的输入文本时遇到问题。看来它不是价值还是innerHTML？我该如何选择它？

这是我到目前为止的代码：

    // Form validation. Display error messages and don't let the user submit the form if any of these validation errors exist:
document.querySelector("button").addEventListener("click", function() {
    // Name field can't be empty
    var nameInput = document.getElementById("name");
    var nameLabel = document.getElementById("nameLabel");

    if(nameInput.value === "") {
        nameLabel.innerHTML = "Name: (please provide name)";
        nameLabel.style.color = "red";
    }
});

Answer 1

使用.value获取输入字段的值，并将css值red置于反转的逗号中nameLabel.style.color = "red";此外，因为您有

<button type ="submit">submit</button>

您需要停止刷新页面。在事件处理程序

中使用e.preventDefault();

在控制台中出现的错误消息是红色未定义，因为它是一个字符串，因此它不需要在""中提供。

＆＃13;

document.querySelector("button").addEventListener("click", function() {
    // Name field can't be empty
    var nameInput = document.getElementById("name");
    var nameLabel = document.getElementById("nameLabel");

    if(nameInput.value === "") {
        nameLabel.innerHTML = "Name: (please provide name)";
        nameLabel.style.color = "red";
    }
});

＆＃13;

<label for="name" id="nameLabel">Name:</label>
<input type="text" id="name" name="user_name">
<button>Submit</button>

＆＃13;

Answer 2

＆＃13;

document.querySelector("button").addEventListener("click", function() {
    // Name field can't be empty
    var nameInput = document.getElementById("name");
    var nameLabel = document.getElementById("nameLabel");
	console.log("\"" + nameInput.value + "\"");
    if(nameInput.value.length == 0) {
        nameLabel.innerHTML = "Name: (please provide name)";
        nameLabel.style.color = "red";
    }
});

＆＃13;

<label for="name" id="nameLabel">Name:</label>
<input type="text" id="name" name="user_name">
<button>Submit</button>

＆＃13;

如何选择文本字段的输入文本？

2 个答案: