https://i.sstatic.net/1jz45.png
I've been diving into learning JavaScript and decided to create a simple web page. This page, when Pikachu (image) is clicked, plays an audio file.
Similarly, if the string "Pikachu" is typed into the form, it should play the same sound, otherwise, it should display "not found".
Here's the HTML code I have:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pokemon Cries</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="sounds.js"></script>
</head>
<body>
<form>
<input id="inputform" type="text" name="search">
<button onclick="getdata()">Search</button>
</form>
<img class="images" src="images/pikachu.png" alt="Pikachu" onclick="pikachusound()">
</body>
</html>
My JavaScript code looks like this:
var pikachu=new Audio("sounds/pikachu.mp3");
var inputstring;
function getdata()
{
inputstring=document.getElementById("inputform").value;
if(inputstring.toLowerCase()=="pikachu")
{
pikachusound();
}
else
{
alert("Not found");
}
}
function pikachusound()
{
pikachu.play();
}
And here's my CSS snippet:
body{
margin: 0;
padding: 0;
}
.images{
height: 150px;
width: 150px;
margin: 20px;
border-style: solid;
border-radius: 50%;
border-width: 5px;
border-color: grey;
}
Clicking on the image works perfectly fine, but sometimes when I input "Pikachu" in the form, the sound doesn't play as expected. I've searched extensively online but can't seem to pinpoint the cause of this erratic behavior.
If anyone could help me identify the bug, I would greatly appreciate it. Thank you!