ISSUE SOLVED. Chance
type="submit"totype="image"within input element HTML.
On my home page I have an image of a heart. It is interactive and can be clicked. Over the couple of days I have made a lot of changes to the html/css/js.. all logged well in github.
Since this morning the heart image is not shown on the home page as a default anymore, but rather an input element is shown. When I click on it, than it shows the heart image again and it continues to works as normal.
Can it be due to a chronological issue with javascript? or am I overlooking something? I've been looking at my code since morning. I am certain as always it must be something stupid..
Right now my internet is insanely bad, so I can't upload any images. But a hand pointing into the right direction would be great.
https://jsfiddle.net/yzac8we8/
I have the image shown in html like this:
<div id="tapDiv"><input type="submit" id="search" src="img/heart.png" value=""><div>
and the JS looks like this:
//Start Heart Beat Calculation
var lastTapSeconds = 0;
var bpm = 0;
//extra variabelen voor functionaliteit uitbreiding.
var beats = [];
var average = 0;
var count = 0;
var tapDiv = document.getElementById("tapDiv");
$(tapDiv).on('click', function() {
var tapSeconds = new Date().getTime();
bpm = ((1 / ((tapSeconds - lastTapSeconds) / 1000)) * 60);
lastTapSeconds = tapSeconds;
tapDiv.innerHTML = '<h1 style="display:inline;">' + Math.floor(bpm) + '</h1><img style="height:256px;width:256px;" src="img/heart.png"/>';
//extra functionaliteit
beats.push(Math.floor(bpm));
average *= count; //average = average * count
average += Math.floor(bpm); //average = average + count
count++;
average /= count; //average = average / counterIncrement
//als array entries 10 heeft bereikt geef prompt met gemiddelde bpm.
if(beats.length >= 10) {
//alert("Your Average Beats Per Minute: " + average);
if ( average > 60 && average < 100 )
alert( "You have a normal resting heart rate. Good Job!" );
else if ( average < 60 )
alert( "You have an efficient heart function and better cardiovascular fitness. Keep it up!" );
else if ( average > 100 )
alert( "Your resting heart has an high average, indicating an unefficient and most likely unhealthy heart." );
else
alert( "Please measure again, your measurements seem unregular..." );
if(beats.length >=10){
beats.length = 0;
bpm = 0;
}
}
});
Please do understand that I have this encapsulated within a bunch of other code that makes for the character of the web app. So a lot more dimensions can be of influence to this problem.
So what the problem actually is: On my homepage it should show the image of the heart within the division element. Like it always did. And I can click the heart because it's interactive. However, currently it only shows and input element and not the heart. But I only need to click the input element and it goes back to the old (normal) design of the heart image. It goes back every time I press refresh-page or start going to the webpage for the first time.
ISSUE SOLVED. Chance
type="submit"totype="image"within input element HTML.
This question is unique in context to it's presumed duplicate, in that the input element with type="submit" has worked, albeit the fact that it shouldn't have. It might be due to the fact that the jQuery chronology within the code that also uses inner HTML for the image used within the input element (which is encapsulated by a division). It has been influenced so, that it has managed to be under the radar for these couple of weeks.
