It has already happened to me several times that when using a href="#" (other href redirects work perfectly for me). Right now I have copied and modified an internet code. I have simplified it to the maximum and it does not work for me.
songlist.onclick = function(e){
e.preventDefault();
var elm = e.target;
var audio = document.getElementById('audio');
var source = document.getElementById('player');
source.src = elm.getAttribute('data-value');
audio.load();
audio.play();
};<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Index</title>
<script src="index.js" type="text/javascript"></script>
</head>
<body>
<ul id="songlist" class="songlist">
<li>
<a href="#" data-value="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga">Cancion</a>
</li>
</ul>
<div>
<audio id="audio" controls="controls">
<source id="player" src=""></source>
- ERROR -
</audio>
</div>
</body>
</html>By running it here, it works perfectly. But locally, in my browser, it does nothing. I guess it's a configuration problem, but I do not know which one. I have used chrome, firefox and edge and the result is the same. I have tried installing xampp as a local Apache server and nothing. In chrome, which is what I use the most, javascript is activated.
I do not know what's wrong, help? Thanks.