Seeking guidance as a beginner in the coding world.
Currently, my code generates numbers from 1 to 99 and displays text next to the number based on certain conditions. For instance, numbers divisible by 3 are labeled 'Java', those divisible by 5 are labeled 'Script', and if they meet both conditions, it displays 'JavaScript'.
My current objective is to have a pop-up display the corresponding number when a user clicks on a vowel. For example: a = 0, e = 1, i = 2, o = 3, and u = 4. Therefore, upon clicking any of these vowels, the pop-up should show the respective number.
I've experimented with using regex to identify the letter 'a' and replacing it with 44 as a test. Research suggests that enclosing these vowels in a span element and adding a mouse click event would be the optimal solution. However, I'm uncertain about how to detect the vowels and wrap them in the desired manner.
Any help or guidance on this matter would be highly appreciated. Thank you all for your support.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<p id="demo"></p>
<script>
(function() {
function getContent(i, str, match, replaceFn) {
//find the vowels and wrap them in a span
//span will have ID or class that we can attach a click handler to.
var straeiou = "<p>" + i + " <span class='foo'>" + str + "</span></p>";
var vowela = /a/gi;
var newvowela = straeiou.replace(vowela, "44");
document.write(newvowela);
}
function num() {
for (var i=1; i<100; i++) {
if (i%3==0 && i%5==0) {
$('#demo').append(getContent(i, "JavaScript"));
}
else if (i%3==0) {
$('#demo').append(getContent(i, "Java"));
}
else if (i%5==0) {
$('#demo').append(getContent(i, "Script"));
}
else {
$('#demo').append(getContent(i, ""));
}
}
}
num();
// $('aeiou').click(function() {
// alert('clicked');
// });
}());
</script>
</body>
</html>