我试图建立一个表单,它需要在用户名,电子邮件和最喜欢的颜色的用户(数据),并显示它回到一个警告框。到目前为止,一切似乎都有效,除了颜色显示为HEX代码-我希望它是颜色的名称或选项的文本。
const button = document.querySelector("button");
const email = document.querySelector("#email");
const username = document.querySelector("#username");
button.addEventListener("click", function(e) {
e.preventDefault();
alert(`Username: ${username.value} nE-Mail: ${email.value} nFavorite color: ${document.querySelector("input[list=presets]").value}`);
})
<form action="">
<label for="username">Username:</label>
<input type="text" name="username" id="username"> <br>
<label for="email">Email:</label>
<input type="email" name="email" id="email"> <br>
<label for="color">Favorite color:</label>
<input type="color" list="presets">
<datalist id="presets">
<option value="#000000" name="black">Black</option>
<option value="#cccccc" name="grey">Grey</option>
<option value="#ffffff" name="white">White</option>
<option value="#0000ff" name="blue">Blue</option>
<option value="#ff0000" name="red">Red</option>
<option value="#00ff00" name="green">Green</option>
</datalist>
<button>Submit</button>
</form>
我尝试了一些东西,大多数时候得到了"Color: undefined",所以得到HEX已经是一个进步。如果颜色是字符串,那就太好了。
正如Cjmarkham指出的那样,您可以获得所选<option>
标记的name
属性。
要获得选中的选项标记,需要使用一些技巧(参见这个答案)。您需要获得<input>
标记的值,然后使用查询选择器获取<option>
标记,该标记是<datalist>
元素的子元素,并且具有与<input>
标记相同的value
属性。请看下面的代码:
const button = document.querySelector("button");
const email = document.querySelector("#email");
const username = document.querySelector("#username");
button.addEventListener("click", function(e) {
e.preventDefault();
const input = document.querySelector('input[list=presets]');
const selected = document.querySelector(`#presets>option[value="${input.value}"]`);
alert(`Username: ${username.value} nE-Mail: ${email.value} nFavorite color: ${selected.getAttribute('name')}`);
})
<form action="">
<label for="username">Username:</label>
<input type="text" name="username" id="username"> <br>
<label for="email">Email:</label>
<input type="email" name="email" id="email"> <br>
<label for="color">Favorite color:</label>
<input type="color" list="presets">
<datalist id="presets">
<option value="#000000" name="black">Black</option>
<option value="#cccccc" name="grey">Grey</option>
<option value="#ffffff" name="white">White</option>
<option value="#0000ff" name="blue">Blue</option>
<option value="#ff0000" name="red">Red</option>
<option value="#00ff00" name="green">Green</option>
</datalist>
<button>Submit</button>
</form>