JS中onclick绑定两个函数时第二个不生效如何解决？

• 元素获取失败：代码中使用document.getElementById('Licht')获取元素，但对应的按钮仅设置了name="Licht"属性，未设置id="Licht"，导致Licht变量的值为null，执行第一个函数时就会抛出引用错误，直接中断后续代码运行，第二个函数自然无法触发。
• 操作对象错误：你绑定点击事件的是<input>按钮元素，该元素本身没有src属性，即便正确获取到按钮元素，修改它的src也不会产生图片切换的效果，你需要单独为交通灯设置<img>标签，针对图片元素修改src属性。
• 同步执行逻辑问题：两个函数同步连续执行时，src属性会被瞬间覆盖，视觉上只会看到最后一次设置的stop1.png效果，看不到绿灯切换的过程，不符合交通灯的交互逻辑。

首先调整HTML结构，新增专门的交通灯图片元素，修正元素id设置：

<!-- 单独设置交通灯图片元素，绑定id -->
<img id="trafficLight" src="stop1.png" alt="交通灯">
<!-- 控制按钮绑定切换函数 -->
<input type="button" value="切换交通灯" onclick="toggleLight()">

然后调整JS逻辑，修复元素获取问题，新增状态控制避免属性覆盖：

// 正确获取交通灯图片元素
var trafficLight = document.getElementById('trafficLight');
// 记录当前灯的状态
var isRed = true;

function maakRood() {
  trafficLight.src = "stop1.png";
  isRed = true;
}
function maakGroen() {
  trafficLight.src = "stop2.png";
  isRed = false;
}

// 点击切换逻辑：红灯切绿灯，绿灯切红灯
function toggleLight() {
  isRed ? maakGroen() : maakRood();
}

如果需要实现点击一次先亮绿灯、等待几秒后自动切红灯的效果，可以改成定时器逻辑：

function switchLightSequence() {
  maakGroen();
  // 绿灯亮3秒后自动切换为红灯
  setTimeout(maakRood, 3000);
}

修改按钮的点击绑定为onclick="switchLightSequence()"即可。

内容的提问来源于stack exchange，提问作者Shady Morsi