Mengembalikan gambar setelah di ganti function javascript

saya mencoba mengganti gambar lampu on dan lampu off dengan function onclick if else. else nya tidak berfungsi mengembalikan letak gambar Mohon Pencerahannya

<div>
      <h1>RUANG KELUARGA</h1>
      <button id="btn" onclick="hidup()"><img id="saklar" src="assets/images/off1.png" onclick="change()" style="width: 130px; height: 130px; margin: auto;" /></button> 
      
      <div class="container text-center ">
        
        <div class="row mt-3">
          <div class="col align-self-start"><img src="assets/images/loff.png" id="lampu1"/></div>
          <div class="col align-self-center"><img src="assets/images/loff.png" id="lampu2"/></div>
          <div class="col align-self-end"><img src="assets/images/loff.png" id="lampu3" /></div>
        </div>
      </div>
</div>
<script src="main.js"></script>

function change() {
  let saklarOn = document.getElementById("saklar");
  if (saklarOn.src.match("assets/images/off1.png")) {
    saklarOn.src = "assets/images/on1.png";
  } else {
    saklarOn.src = "assets/images/off1.png";
  }
}

function hidup() {
  let button = document.getElementById("btn");
  let lampu1 = document.getElementById("lampu1");
  let lampu2 = document.getElementById("lampu2");
  let lampu3 = document.getElementById("lampu3");

  if (button.onclick) {
    lampu1.src = "assets/images/lon.png";
  } else {
    lampu1.src = "assets/images/loff.png";
  }

  if (button.onclick) {
    lampu2.src = "assets/images/lon.png";
  } else {
    lampu2.src = "assets/images/loff.png";
  }

  if (button.onclick) {
    lampu3.src = "assets/images/lon.png";
  } else {
    lampu3.src = "assets/images/loff.png";
  }
}