Html 如何旋转包含项目的圆？

我一直在尝试使用一个按钮旋转一个包含项目的圆，当我直接在css中更改圆的旋转值时，效果很好，但html代码中似乎存在问题。 html代码：

网页设计测试






摄像机
108MP主摄像机

处理器
埃克斯诺斯990

展示
6.9英寸，1440px

电池
4500毫安

特征
var circle=document.getElementById（'circle'）；
var upBtn=document.getElementById（'upBtn'）；
var downBtn=document.getElementById（'downBtn'）；
var rotateValue=circle.style.transform（）；
旋转变种；
upBtn.onclick=函数（）{
rotateSum=rotateValue+“旋转（-90度）”；
circle.style.transform=rotateSum；
rotateValue=rotateSum；
}

css代码： 在这里输入代码

  #circle {
  width: 1000px;
  height: 1000px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: rotate(0deg);
  .controls {
    position: absolute;
    right: 10%;
    top: 50%;`enter code here`
    transform: translateY(-50%);
    text-align: center;
  }
  .controls h3 {
    margin: 15px 0;
    color: #fff;
  }
  #upBtn {
    width: 15px;
    cursor: pointer;
  }
  #downBtn {
    width: 15px;
    cursor: pointer;
    transform: rotate(180deg);
  }

---

您的html代码中没有

圆圈

。。。 所以当你这样做的时候：

var circle=document.getElementById（circle）；

var-circle为null

，因为没有一个html元素的id为circle，而您正试图使用这样一个名为 此外，执行此操作时：

document.getElementById（圆圈）
将在每个id中查找字符串，因此应为：

document.getElementById（'circle'）；

编辑：
为了明确起见，当您使用选择器时，您正在查找匹配的字符串，当您执行此操作时：

var circle=document.getElementById（circle）；
var upBtn=document.getElementById（upBtn）；
var downBtn=document.getElementById（downBtn）；

应该是这样的：

var circle=document.getElementById（'circle'）；
var upBtn=document.getElementById（'upBtn'）；
var downBtn=document.getElementById（'downBtn'）；

在第一个例子中，你说的是寻找一个值为os圆圈的字符串

var circle = 'notCircle'
var circle = document.getElementById(circle);
console.log(circle)

在第二个示例中，您直接查找html ID上的x字符串
在html代码中没有
圆圈
。。。
所以当你这样做的时候：

var circle=document.getElementById（circle）；

var-circle为null
，因为没有一个html元素的id为circle，而您正试图使用这样一个名为
此外，执行此操作时：

document.getElementById（圆圈）
将在每个id中查找字符串，因此应为：

document.getElementById（'circle'）；

编辑：
为了明确起见，当您使用选择器时，您正在查找匹配的字符串，当您执行此操作时：

var circle=document.getElementById（circle）；
var upBtn=document.getElementById（upBtn）；
var downBtn=document.getElementById（downBtn）；

应该是这样的：

var circle=document.getElementById（'circle'）；
var upBtn=document.getElementById（'upBtn'）；
var downBtn=document.getElementById（'downBtn'）；

在第一个例子中，你说的是寻找一个值为os圆圈的字符串

var circle = 'notCircle'
var circle = document.getElementById(circle);
console.log(circle)

在第二个示例中，您在html id上直接查找x字符串，例如，如果id是
#circle

document.getElementById（圆圈）-->
document.getElementById（'circle'）

如果您根据此函数发布所有html，则会更好，例如，如果id为
#圆圈

document.getElementById（圆圈）-->
document.getElementById（'circle'）

最好是根据此函数发布所有html
查看我用代码创建的代码段中的控制台错误？这是一个很好的起点。找不到圆的元素。我猜您正在加载HTML之前运行脚本。您需要将字符串传递到
document.getElementById（）
，因此请将
圆圈
、
上行
和
下行
括在引号中。此外，您不能使用HTML访问用户的文件；这将是一个巨大的安全漏洞。看到我用代码创建的代码片段中的控制台错误了吗？这是一个很好的起点。找不到圆的元素。我猜您正在加载HTML之前运行脚本。您需要将字符串传递到
document.getElementById（）
，因此请将
圆圈
、
上行
和
下行
括在引号中。此外，您不能使用HTML访问用户的文件；这将是一个巨大的安全漏洞。代码还有更多的问题，例如
transform
在不是函数时如何作为函数调用，参数如何需要用引号括起来，以及
rotateValue
如何尝试使用pass-by-reference设置，当Javascript不是通过引用传递的语言时。代码也有更多的问题，比如
transform
不是函数时如何作为函数调用，参数如何需要用引号括起来，以及
rotateValue
如何尝试通过通过引用传递进行设置，当Javascript不是传递引用语言时。