从选择列表中生成随机颜色

Generate Random color from select list

本文关键字:生成随机颜色 列表 选择      更新时间:2023-09-26

当用户从选择列表中选择值时,我正在尝试为结果生成随机颜色。

 <div id="req7" class="req7">
 <select id="names">
 <option value="Name1">Name 1</option>
 <option value="Name2">Name 2</option>
 <option value="Name3">Name 3</option>
 <option value="Name4">Name 4</option>
 </select><br><br>
 <p>Click the button to return the value of the selected headline.    </p><br>
 <button class="styled-button" type="button"  onclick="headline()">Submit</button><br>
 <br><br>
 <h1 id="here"></h1>
 </div>
function headline(){
var nemo = document.getElementById("names").value;
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
  color += letters[Math.round(Math.random() * 15)];
 }
 return color;
 document.getElementById("here").innerHTML = nemo;
 }

您在document.getElementById("here").innerHTML = nemo;之前正在执行return color;

在这里,这应该有效:

function headline(){
  var nemo = document.getElementById("names").value;
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++ ) {
    color += letters[Math.round(Math.random() * 15)];
   }
   document.getElementById("here").innerHTML = nemo;
   return color;
}

另外,您的代码具有onc lick.

<button class="styled-button" type="button" onc lick="headline()">Submit</button应该是 <button class="styled-button" type="button" onclick="headline()">Submit</button

https://output.jsbin.com/zunowuvede