Play sound on click ( Anywhere) - javascript

Im trying to create a function that when you click down anywhere on the page a sound is played. I can only find information on how to do this for buttons.
If you can help me that would be amazing
html css and js
Thank you

This script binds an click event to any element in the body, upon click will play the sound stated in the audio tag.
<!doctype html>
<html>
<head>
<title>Play audio</title>
</head>
<body onload="addEvent()">
<script>
function addEvent(){
document.body.addEventListener("click", play)
}
function play() {
var audio = document.getElementById("audio");
audio.play();
}
</script>
<h1>click any element on the body to play sound </h1>
<audio id="audio" src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>
</body>
</html>

you should just handle onclick event.
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
<script>
var should_play=true
window.onclick = () => {
if (should_play){
should_play=!should_play
let soundSource = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3";
let sound = new Audio(soundSource);
sound.play();
sound.onended = () => {
should_play=true
}
}
}
</script>
</html>
variable should_play has been defined for not to playing song again when it is playing.

Why dont just use onClick event on the body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onclick="playAudio()" style="height: 1000px;">
<p>CLICK</p>
<audio id="audio" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
<script>
function playAudio() {
var audio = document.getElementById("audio");
audio.play();
}
</script>
</body>
</html>

Related

check if click is true on eventListener

const button = document.getElementById('button');
const btn = button.addEventListener("click", run);
button.disabled = true;
function run() {
if (btn.onclick == true && button.disabled == true) {
alert('the button is clicked');
}
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="resources/styles/app.css">
</head>
<body>
<button id="button"></button>
</body>
<script type="module" src="./resources/js/index.js"></script>
</html>
I have a button with an addEventListener("click", run); on it. Now I would like to check if the button is clicked yes or no. I know you can check this with onclick but this doesnt seem to work and returns undefined.
I have a function were I disable the button for x minutes. when the buttons is disabled and a user tries to click on it i want to show an alert.
Just get rid of the if statement. The event listener runs whenever the button is clicked.
const button = document.getElementById('button');
button.addEventListener("click", run);
function run() {
alert('the button is clicked');
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="resources/styles/app.css">
</head>
<body>
<button id="button">Click me</button>
</body>
<script type="module" src="./resources/js/index.js"></script>
</html>

Why JS Event handlers are not working for elements created at runtime?

document.querySelector("#fire_button_creator_button").addEventListener("click",function () {
document.querySelector("body").appendChild(document.createElement("button")).innerText="now click me,i am fire button";
})
document.querySelector("#fire_button_creator_button+button").addEventListener("click",function () {
document.querySelector("p").innerText="i am fired";
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="fire_button_creator_button">fire button creator</button>
<p></p>
</body>
</html>
I want to creat a button in runtime that can do somthing. Somthing like in my code it inject some text inside <p> </p> tag "i am fired". But i am getting errore. But why?. What is the solution(in vanilla javascript of course)?
document.querySelector("#fire_button_creator_button").addEventListener("click",function () {
const button = document.createElement("button");
document.querySelector("body").appendChild(button).innerText="now click me,i am fire button";
button.addEventListener("click",function () {
document.querySelector("p").innerText="i am fired";
})
})
You have to add the event listener AFTER the new button element is created.
You can do that like the code sample above or other way. The only important part is to do AFTER it is created, so an actual event listener is attached to an actual html element
You can just assign the eventListener to the createdElement immediately instead of selecting it again (which won't work in your case, as the element doesn't even exist yet).
document.querySelector("#fire_button_creator_button").addEventListener("click",function(){
const button = document.createElement("button")
button.innerText="now click me, i am fire button"
button.addEventListener("click",function(){
document.querySelector("p").innerText="i am fired";
})
document.querySelector("body").appendChild(button)
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="fire_button_creator_button">fire button creator</button>
<p></p>
</body>
</html>

I need help to change image with mouseover function

Hello I need help to change image with mouseover function
I only get one image and I need multiple images, I attach my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=f, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JS practice Image Mouse Over</title>
</head>
<body>
<!-- -->
<div id="div"></div>
<img src="img/01.SanitariosC.png" alt="Sanitarios" id="sanitarios">
<img src="img/02.GriferiasC.png" alt="Griferias" id="griferias">
<script src="js/index.js"></script>
</body>
</html>
/* SANITARIOS*/
let image = document.getElementById('sanitarios');
function changeToLike() {
image.src="img/01.SanitariosE.png";
}
function changeToDislike() {
image.src="img/01.SanitariosC.png";
}
image.addEventListener('mouseover', changeToLike); image.addEventListener('mouseout', changeToDislike);
/* GRIFERIAS*/
let image1 = document1.getElementById1('griferias');
function changeToLike1() {
image1.src="img/02.GriferiasE.png";
}
function changeToDislike1() {
image1.src="img/02.GriferiasC.png";
}
image1.addEventListener1('mouseover', changeToLike1); image1.addEventListener1('mouseout', changeToDislike1);
Try this code
var image = document.getElementById("imageId");
image.addEventListener('mouseover', function(){
image.src = "https://planetcoms.com/wp-content/uploads/2017/01/happy-smiley.png"
})
<!DOCTYPE html>
<html>
<head>
<title>mouse hover & change picture in JavaScript</title>
</head>
<body>
<img src="https://i.pinimg.com/originals/15/a5/e0/15a5e0513b6c4811b928b96d96d5ce29.png" width="175px" id="imageId">
</body>
</html>
What you can do to change the image's src is add listener to image or image div
<html>
<head>
<title>mouse hover & change picture in JavaScript</title>
</head>
<body>
<img src="oldImg.png" class="oldImg">
</body>
</html>
Add the listener to image
let image = document.querySelector("oldImg");
image.addEventListener('mouseover', ()=>{
image.src = "newImg.png"
})

Randomise youtube link to play in an embedded video

$("#video").attr('src', idea(ads));
$(".heading").text(idea(ads));
var ads = ["https://youtu.be/nSZtxXNjmLA", "https://www.youtube.com/watch?v=D2pOkm4opVU"];
function idea(el) {
return el[Math.floor(Math.random() * el.length)];
}
So I am using the function idea to randomise it. The iframe has an id of video.
1 - Move var ads to the first line
2 - Link jquery in yout html https://learn.jquery.com/about-jquery/how-jquery-works/
<script src="https://code.jquery.com/jquery-git.js"></script>
var ads = [
"youtu.be/nSZtxXNjmLA",
"youtube.com/watch?v=D2pOkm4opVU",
"youtu.be/WElPhX5Pb6I",
"youtu.be/78mNZeDaMtk"
];
$("#video").attr('src', idea(ads));
$(".heading").text(idea(ads));
function idea(el) {
return el[Math.floor(Math.random() * el.length)];
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Demo</title>
</head>
<body>
<h1 class="heading"></h1>
<video src=""></video>
<script src="https://code.jquery.com/jquery-git.js"></script>
</body>
</html>

How to print another file than the current one?

I thought this simple setup would work and use the alternate link to print test.pdf. But in the print preview I see the current page and not test.pdf???
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="alternate" media="print" href="http://localhost/mydomain.com/test/test.pdf">
<script>
window.print();
</script>
</head>
<body>
<div>TODO write content</div>
</body>
</html>
[edit]
the closest I got only seems to work in Chrome (I like to skip the print preview and auto print, but the --kiosk doesn't seem to play along with following code):
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-2.2.0.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function ($) {
function print(url)
{
var _this = this,
iframeId = 'iframeprint',
$iframe = $('iframe#iframeprint');
$iframe.attr('src', url);
$iframe.load(function () {
callPrint(iframeId);
});
}
//initiates print once content has been loaded into iframe
function callPrint(iframeId) {
var PDF = document.getElementById(iframeId);
PDF.focus();
PDF.contentWindow.print();
}
print('http://localhost/mydomain.com/tests/test.pdf');
});
</script>
</head>
<body onload="">
<div>TODO write content</div>
<iframe id="iframeprint" src=""></iframe>
</body>
</html>
You can't do this to a pdf file. But you can do this to an html file.
Something like this:
function print() {
var w = window.open('', 'width=400, height=400');
w.document.body.innerHTML = "HTML";
w.print();
}
<button onclick="print()">Print another file</button>
You can see it here: http://output.jsbin.com/kefoxo
The full code: (Tested on Google Chrome)
http://jsbin.com/kefoxo/edit?html,js

Categories

Resources