javascript - 将值传递给显示函数javascript

Question

我需要帮助弄清楚如何将“div”的值传递给我正在处理的显示函数。这是我的代码。

//上面我有一个构造函数，我声明了“newbox”，我也得到了我的盒子的值 //在页面上显示框并获取它们的值可以正常工作

  function addBox(newbox) {  
   for (var i = 0; i < newbox.number; i++) {                                 
   var scene = document.getElementById("scene");              
   var div = document.createElement("div");                   
   div.className += " " + "box"; 
   div.innerHTML += newbox.name; 
   div.style.backgroundColor = newbox.color;  
   var x = Math.floor(Math.random() * (scene.offsetWidth-101));
   var y = Math.floor(Math.random() * (scene.offsetHeight-101));
   div.style.left = x + "px";
   div.style.top = y + "px"; 
   scene.appendChild(div); 
   div.onclick = display;                          
   //console.log("added"); 
    } 
   return div;                 
  }

//使字符串传递给下一个函数的函数

  function makeString(name,color) {
  var aString = "name" + "color";
  return aString;
  }

//单击框时应显示警报的显示函数。

  function display(e) {
  var a = e.target;
  var string = makeString(a.name, a.color);
  a.onclick = alert(string);
  }

到目前为止，当我点击一个框时，我得到了字符串“namecolor”。我想通过执行“a.name”和“a.color”我可以从我点击的目标中获取这些值，但这显然不起作用。还尝试将 div 直接传递给 display() 函数，但我不知道如何正确地做到这一点。我是初学者，所以这可能非常明显，但不胜感激。

Answer 1

添加框

这个方法没有意义，因为你在一个 for 循环中循环创建一定数量的 div，但你只返回一个？

function addBox(newbox) {
  var i, div, scene = document.getElementById("scene");
  for (i = 0; i < newbox.number; i++) {
    div = document.createElement("div");
    scene.appendChild(div);
    div.onclick = display;
  }
  return div;
}

这样更有意义:

function addBox() {
  var i, div, scene = document.getElementById("scene");
  div = document.createElement("div");
  scene.appendChild(div);
  div.onclick = display;
  return div;
}

生成字符串

正如其他人所说，不要将 var 括在引号中，因为这意味着它们将被视为字符串，而不是变量。

function makeString(name,color) {
  var aString = "" + name + color;
  return aString;
}

显示

如果您希望保持 string 的值可用，则必须将匿名函数分配给事件处理程序，以便它可以在 onclick 时收到警报。只需分配警报方法的结果就意味着警报将立即发生，而不是等待点击。

a.onclick = alert(string);

不过，这个display方法还是有点让人迷惑，因为display是在点击div的时候触发的。然后，您将分配另一个 onclick 处理程序，它只会在下次单击 div 时触发。

function display(e) {
  var a = e.target;
  var string = makeString(a.name, a.color);
  a.onclick = function(){
    alert(string);
  }
}

更有意义的是:

function display(e) {
  var a = e.target;
  var string = makeString(a.name, a.color);
  alert(string);
}

名称和颜色

此外，您的代码没有提及在 div 元素上设置 name 和 color 的位置？你是指文本的颜色、背景的颜色还是其他任意值？还有 name 是指 .nodeName 还是其他元素的 .name 属性？

如果你想在 div 上使用任意属性，你可以使用 setAttribute，所以在你创建它之后，分配你想要的值:

div = document.createElement("div");
div.setAttribute('name', 'this_is_my_name');
div.setAttribute('color', 'midnight blue');

然后使用 getAttribute 检索它们:

var string = makeString(a.getAttribute('name'), a.getAttribute('color'));

或者正如其他人所说，如果您希望获得 div 的当前文本颜色，请使用 .currentStyle.color 和 .getComputedStyle - 但是会容易得多通过 .style.color 在 div 上专门定义颜色，这更容易以跨浏览器的方式回读。

div = document.createElement("div");
div.style.color = 'red';

然后回读:

alert( div.style.color );