获取颜色输入名称(而不是HEX) -颜色的数据列表

Question

我试图建立一个表单，它需要在用户名，电子邮件和最喜欢的颜色的用户(数据)，并显示它回到一个警告框。到目前为止，一切似乎都有效，除了颜色显示为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已经是一个进步。如果颜色是字符串，那就太好了。

Answer 1

正如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>