Fatal编程技术网
  • javascript/
  • Javascript 为什么这个网格依赖于不相关的变量？

Javascript 为什么这个网格依赖于不相关的变量？

javascript

Javascript 为什么这个网格依赖于不相关的变量？,javascript,Javascript,我正试图用单个ID显示一个div网格 我发现，当宽度值超过10时，网格开始创建一些奇怪的图案，有些线条超出宽度值，有些线条折叠得太快 当我使用 cellId = x.toString() + "/" + y.toString(); 一切似乎都很好 那是什么意思 + "/" + 换衣服？除了简单地向cellId添加字符串之外 我发布了完整的代码，1）因为它很短2）以确保问题不在css中 <head> <style type = "text/css">

我正试图用单个ID显示一个div网格

我发现，当宽度值超过10时，网格开始创建一些奇怪的图案，有些线条超出宽度值，有些线条折叠得太快

当我使用

cellId = x.toString() + "/" + y.toString();
一切似乎都很好

那是什么意思

+ "/" +
换衣服？除了简单地向cellId添加字符串之外

我发布了完整的代码，1）因为它很短2）以确保问题不在css中

<head>

    <style type = "text/css">

        .pixel {
            font-size:12px;
            font-family: sans-serif;
            float:left;
            width:20px;
            height:20px;
        }


    </style>

    <script type = "text/javascript">

    </script>        

</head>

<body>

    <script type="text/javascript">

   function drawBoard(height, width) {

       for (x=0; x<=height; x++) {

            for (y=0; y<=width; y++) {

                cell = document.createElement('div');  
            //    cellId = x.toString() + "/" + y.toString();
                cellId = x.toString() + y.toString();
                cell.setAttribute("id", cellId);
                document.body.appendChild(cell);
                document.getElementById(cellId).setAttribute("class", "pixel");
                if (y == 0) {
                    document.getElementById(cellId).style.clear = "both";
                    console.log(y);
                }

                document.getElementById(cellId).innerHTML = cellId;
            }

       }

   }

        drawBoard(18, 10);

    </script>


</body>



.像素{
字体大小：12px；
字体系列：无衬线；
浮动：左；
宽度：20px；
高度：20px；
}
功能抽板（高度、宽度）{

对于（x=0；x您的id值由两个粘在一起的数字组成。当
x
为8且
y
为32时，您将得到832。但是，当
x
为83且
y
为2时，您也将得到832

<>你的代码正在创建具有重复ID值的元素，这是问题的核心。用中间的“/”字符来解决它。现在，在上面描述的情况下，你会得到“8/32”和“83/2”。

当然，您可以使用“/”之外的任何其他字符。
您的id值由两个粘在一起的数字组成。当
x
为8，
y
为32时，您将得到832。但是，当
x
为83，
y
为2时，您也将得到832

<>你的代码正在创建具有重复ID值的元素，这是问题的核心。用中间的“/”字符来解决它。现在，在上面描述的情况下，你会得到“8/32”和“83/2”。

当然，您可以使用“/”之外的任何其他字符。
它只是用
/
分隔。不确定您的问题是什么。仅供参考，当您可以只使用已创建的
单元格
变量时，无需执行
文档.getElementById（cellId）
。此外，请使用
var
声明您的变量！（或者对于现代语法来说，
let/const
）@Krzysztof，
cellId=“11”+“2”
和
cellId=“1”+“12”
？现在是相同的练习，包括
//code>它只是与
//code>分开。不确定你的问题在这里。仅供参考，没有必要执行
document.getElementById（cellId）
当您可以只使用您已经创建的
cell
变量时。另外，用
var
声明您的变量！（或
let/const
用于现代语法。）@Krzysztof，cellId=“11”+“2”
和
cellId=“1”+“12”之间的区别是什么
？现在同样的练习，包括
/
这难道不能只是一个评论吗？@PraveenKumar为什么？这是问题的答案，没有？是的，但问题的质量似乎很低。我错了吗？@PraveenKumar不，没有，请再次阅读我的答案。他的问题是，当他没有包含“/”时，为什么代码会失败当他连接x/y坐标时使用分隔符。Praveen你不理解这个问题。这个问题错误地假设字符串操作正在做一些特殊的事情，这是你关注的，但是这里有一个真正的错误导致了一个真正的问题。这难道不只是一个注释吗？@PraveenKumar为什么？这是问题的答案，不？是的，但是问题的质量似乎很低。我错了吗？@PraveenKumar不，不，再看一次我的答案。他的问题是当他没有包含“/”时，为什么代码会失败当他连接x/y坐标时使用分隔符。Praveen您不理解这个问题。这个问题错误地假设字符串操作正在做一些特殊的事情，这是您关注的，但是这里有一个真正的错误导致了一个真正的问题。