Question

我正在编写一个程序，以更改加载时SVG元素的x值（最终打算成为映射程序的一部分）。我的代码陷入尝试访问每个元素的特定值的问题，我不确定为什么。

下面是代码：

<html>
<body>
  <svg width="12cm" height="12cm" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
    <rect id="a" x="40" y="180" width="30" height="30" fill="#000"/>
    <rect id="b" x="100" y="180" width="30" height="30" fill="#000"/>
    <rect id="c" x="160" y="180" width="30" height="30"
  fill="#000"/>
    <rect id="d" x="220" y="180" width="30" height="30" fill="#000"/>
  </svg>
  <script>
    var array1 = [a, b, c, d];

    array1.forEach(function(element) {
      console.log(element);
      var xValue = document.getElementById(element).style.x;
      xValue = xValue * 2;
      document.getElementById(element).style.x = xValue;
      console.log("done");
    });
  </script>
</body>
</html>

我可以断定JavaScript正在访问SVG内部的信息，因为控制台会使用数组中的ID记录整个元素。但是，我也可以说JavaScript试图访问元素的特定属性时陷入困境，因为控制台仅记录代码的第一行，并且仅记录数组中的第一个元素。

最终，应该发生的情况是JavaScript从数组获取ID，访问该元素，访问该元素的某些属性（在本例中为x值），对该属性执行转换并对其进行更改（因此，如果此方法有效，则每个SVG元素的x位置将偏移2倍。）

我确定这里的问题是我的语法，但是我不太清楚为什么。我尝试使用.innerHTML，但没有帮助。这是一个CodePen，可以看到它的实际效果。如果打开控制台，则可以看到第一行日志：https://codepen.io/anon/pen/GBqNrK?editors=1111

感谢您的帮助。

Answer 1

感谢Pointy的提示和一些快速调试，我已经弄清楚了！

这是解决方案：首先，没有理由使用UPDATE 1042sRegistration INNER JOIN 1042sTransactions ON 1042sRegistration.AccountNumber = 1042sTransactions.AccountNumber SET 1042sRegistration.IssueNumber = 1042sTransactions.IssueNumber，因为我已经访问过该元素。我还必须使用.getElementById()而不是.getAttribute()，将.style.x更改为*，然后使用=*来更改值。

这是最终的功能代码：

.setAttribute("x", xValue)

使用大量<html> <body> <svg width="12cm" height="12cm" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> <rect id="a" x="40" y="180" width="30" height="30" fill="#000"/> <rect id="b" x="100" y="180" width="30" height="30" fill="#000"/> <rect id="c" x="160" y="180" width="30" height="30" fill="#000"/> <rect id="d" x="220" y="180" width="30" height="30" fill="#000"/> </svg> <script> var array1 = [a, b, c, d]; array1.forEach(function(element) { console.log(element); var xValue = element.getAttribute("x"); console.log(xValue); xValue *= 2; console.log(xValue); element.setAttribute("x", xValue); console.log(xValue); console.log("done"); }); </script> </body> </html>进行调试，代码在哪里停止以及值如何更改。

以下是一个显示该程序工作情况的代码笔：https://codepen.io/anon/pen/GBqNrK?editors=1111

希望这最终会对某人有所帮助！

JavaScript停留在从HTML访问样式元素上

1 个答案: