Javascript 如何在不同id上使用相同的输出更改显示css切换开关？

您好，我是编程新手，尝试在customization switch proto.io提供的上获得相同的输出，我在如何使切换开关打印相同的输出上遇到问题

java有问题

<footer id="change" class="blockquote-footer">STATUS: DISAPPROVED</footer>


<div class="onoffswitch" onclick="myFunction()"
                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
                    <label class="onoffswitch-label" for="myonoffswitch">
                        <span class="onoffswitch-inner"></span>
                        <span class="onoffswitch-switch"></span>
                    </label></div>  

//这是javascript

 function myFunction() {   var x = document.getElementById("myonoffswitch");   var y = document.getElementById("change");   if (x.innerHTML === "APPROVED") {
    x.innerHTML = "APPROVED";
    y.innerHTML = "STATUS: APPROVED";   } else {
    x.innerHTML = "DISAPPROVED";
    y.innerHTML = "STATUS: DISAPPROVED";   } }

我试图得到这样的输出

---

如果您从CSS开始，也可以使用CSS完成所有工作）
简化示例：

标签{
显示：内联块；
光标：指针；
背景：橙色；
填充物：5px；
利润率：30像素；
}
.onoffswitch内部：：之后{
内容：“不赞成”；
}
.onoffswitch内部：：之前{
内容：“批准”；
显示：无；
}
#onoff:已选中~。开关状态。onoffswitch内部：：之后{
显示：无；
}
#onoff:选中~.开关状态.onoffswitch内部：：之前{
显示：内联块；
}

地位：

注意：

Java

和

JavaScript

是不同的语言感谢prime先生！这对我的项目真的很有帮助！！uwu

 function myFunction() {   var x = document.getElementById("myonoffswitch");   var y = document.getElementById("change");   if (x.innerHTML === "APPROVED") {
    x.innerHTML = "APPROVED";
    y.innerHTML = "STATUS: APPROVED";   } else {
    x.innerHTML = "DISAPPROVED";
    y.innerHTML = "STATUS: DISAPPROVED";   } }