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

addBox

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

makeString

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

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

显示

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

a.onclick = alert(string);

但是，这个display方法仍然有点令人困惑，因为点击div时会触发display。然后，您将分配另一个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上专门定义颜色{1}}更容易以跨浏览器方式回读。

.style.color

然后回读：

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

Answer 2

您的代码中存在一些问题。

首先，改变一下：

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更新您的问题，我可以相应地调整我的答案。

Answer 3

在没有引号的情况下将var aString = "name+"color"更改为var aString = name+color。

Answer 4

尝试

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

将值传递给显示函数javascript

4 个答案:

addBox

makeString

显示

名称和颜色