With Electron, I'm trying to create a toggle image button to switch between two images on clicking
images/img1.pngimages/img2.png
However, with the following code, the image simply flashes on clicking without switching.
What's wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="
default-src 'self';
script-src 'self''unsafe-inline';
connect-src *">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bookmarker</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<!-- <body>
<h1>Hello from Electron</h1>
</body>
<p>
<button class="alert">Current Directory</button>
</p> -->
<h1>Bookmarker</h1>
<div class="error-message"></div>
<section class="add-new-link">
<form class="new-link-form">
<input type="image" id="img-1" class="img-btn" src="images/img1.png" onclick="Switch(this);" width=4% height=4%>
<input type="url" class="new-link-url" placeholder="URL" size="100" required>
<input type="submit" class="new-link-submit" value="Submit">
</form>
</section>
<section class="links"></section>
<section class="controls">
<button class="clear-storage">Clear Storage</button>
</section>
<script>
require('./renderer');
</script>
</html>
Then the click event handler in renderer.js
const { shell } = require('electron');
function Switch(img) {
// img.src = img.src == "images/img1.png" ? "images/img2.png" : "images/img1.png";
if (img.src != "images/img1.png") {
img.src = "images/img1.png"
} else {
img.src = "images/img2.png"
}
}