1

我需要帮助弄清楚如何将“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() 函数，但我没有弄清楚如何正确地做到这一点。我是初学者，所以这可能非常明显，但感谢您的帮助。

4

4 回答 4

3

添加框

这种方法没有意义，因为您在 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;
}


制作字符串

正如其他人所说，不要将您的 vars 用引号括起来，因为这意味着它们被视为字符串，而不是变量。

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


展示

如果您希望保持string可用的值，您必须为事件处理程序分配一个匿名函数，以便它可以被警告onclick。只分配 alert 方法的结果将意味着警报将立即发生，而不是等待点击。

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- 然而更容易的是在 div 上专门定义颜色，.style.color这样更容易以跨浏览器的方式回读。

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

然后回读：

alert( div.style.color );
于 2013-01-16T23:32:56.370 回答
1

您的代码中有几个问题。

首先，改变这个：

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

对此：

var string = makeString(a.innerHTML, a.currentStyle['color']);

然后，改变这个：

var aString = "name" + "color";

对此：

var aString = name + color;

这将为您提供 DIV 的内容和 DIV 上的当前颜色 CSS 属性。你的问题有点不清楚你想要显示什么。如果您可以澄清要从 DIV 显示的内容或使用 HTML 更新您的问题，我可以相应地调整我的答案。

于 2013-01-16T23:21:20.720 回答
1

更改var aString = "name+"color"为var aString = name+color不带引号。

于 2013-01-16T23:22:25.450 回答
1

尝试

function makeString(name,color) {
    var aString = name+""+color;
    return aString;
}
于 2013-01-16T23:23:20.290 回答