Question

所以我做了一个可以在单击按钮时将div边框更改为随机颜色的函数，但是我被告知我做错了所有事情，所以我希望也许这样可以告诉我谁是对的，或者我们俩都在做错了。

请注意，我只是三天前才开始学习javascript。

changer1 是该人更改div边框的功能，他说我需要使用forEach上的array.from，并且还说我不需要第二个参数，他说我的addEventListener不正确。。？ changer2 是我的，我说我不需要array.from。

有人可以解释甚至帮助吗？

var button1 = document.getElementById("button1");
button1.addEventListener("click", changer1);

function changer1() {
  const randcol = Array.apply(null, Array(6)).map(function() {
    const allchar = '0123456789ABCDEF';
    return allchar.charAt(Math.random() * allchar.length);
  }).join('');

  var divs = document.querySelectorAll('.div1, .div2, .div3');

  Array.from(divs).forEach(function(div) {
    div.style.borderColor = "#" + randcol;
  });
}

var button2 = document.getElementById('button2');
button2.addEventListener("click", () => changer2());

function changer2() {
  const randcol = Array.apply(null, Array(6))
    .map(function() {
      const allchar = '0123456789ABCDEF';
      return allchar.charAt(Math.random() * allchar.length);
    }).join('');

  var divs = document.querySelectorAll('.div1, .div2, .div3');

  divs.forEach(function(div) {
    div.style.borderColor = "#" + randcol;
  });
}

<div class="div1" style="border-radius: 1em; border: 2px solid rgb(0, 0, 0);">
  <p>
    <center>This is div 1</center>
  </p>
</div>
<br>
<div class="div2" style="border-radius: 1em; border: 2px solid rgb(0, 0, 0);">
  <p>
    <center>This is div 2</center>
  </p>
</div>
<br>
<div class="div3" style="border-radius: 1em; border: 2px solid rgb(0, 0, 0);">
  <p>
    <center>This is div 3</center>
  </p>
</div>
<br>
<button id="button1" style="width: 40%;">changer 1</button> &nbsp;
<button id="button2" style="width: 40%;">changer 2</button>

Answer 1

详细信息在演示中进行了评论

Expanded

Expanded(
  child: Row(
    children: <Widget>[
      Icon(
        Icons.account_balance,
        size: 13.0,
        color: Colors.grey
      ),
    Padding(
      padding: const EdgeInsets.only(left: 10.0),
      child: Text(
        values[index].societyName,
        style: TextStyle(color: Colors.grey, fontSize: 15.0), 
        maxLines: 2,
        overflow: TextOverflow.clip,
      ), //TEXT HERE 
    ),
  ],
),

/* 
Pass a number and it will return that many random hex numbers
in the range of 0 to F
The passed parameter determines the number of iterations the for
loop will complete.
On each iteration a random hex number is converted into a string
then pushed into an array
After the for loop is complete, the array is joined into a string
which is then returned.
*/
function randomHex(digits) {
  let hex = [];
  for (let h = 0; h < digits; h++) {
    hex.push(Math.floor(Math.random() * 16).toString(16));
    //console.log(hex);
  }
  return hex.join('');
}

/*
Collects all elements with the class .colorBox in a NodeList
Loops through NodeList and assigns a random background-color and
 border-color to each element in NodeList.
The random color is derived from the return value of randomHex()
*/
function changeColor(e) {
  const cBoxes = document.querySelectorAll('.colorBox');
  for (let box of cBoxes) {
    box.style.backgroundColor = '#' + randomHex(6);
    box.style.borderColor = '#' + randomHex(6);
  }
}

// Bind the button to the click event--when clicked call colorChange()
document.querySelector('.colorBtn').onclick = changeColor;

Javascript：单击按钮时将div边框更改为随机颜色

1 个答案: