"onend" in ResponsiveVoice does not mean AFTER playing text? - javascript

I need to play some text and ONLY THEN perform the following actions (e.g. hiding the "pause" and "stop" buttons), but they are hidden IMMEDIATELY when I start playing the text. Simplified situation - see code.
Many thanks for the advice..
<!DOCTYPE html>
<html>
<body>
<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<script>
function Voice(id){
var element = document.getElementById(id);
var text = element.innerText;
responsiveVoice.speak(text, "UK English Male", {onend: Hide("div1")});
}
function Hide(id){
var element = document.getElementById(id);
element.style="visibility: hidden";
}
</script>
<div id="div1">This is the first line.</div>
<div id="div2" onclick = 'Voice("div2")'>
This is the second line.
</div>
<br>
Click on the second line to play its text. The first line should be hidden after the message is played.<br>
But it is hidden IMMEDIATELY after clicking. What is wrong?
</body>
</html>
The solution is to use arrow: {onend: () => Hide()} instead of {onend: Hide()} (Thanks to CertainPerformance).
onstart:, onend: and rate: can even be used simultaneously. There is only one small problem - after changing the content of the page, there is a long delay when using the ResponsiveVoice function for the first time. See code:
<!DOCTYPE html>
<html>
<body>
<script src='https://code.responsivevoice.org/responsivevoice.js'>
</script>
<script>
function Read(id){
var element = document.getElementById(id);
var text = element.innerText;
responsiveVoice.speak(text, "UK English Male", {rate: 1.3, onstart: () => Show(), onend: () => Hide()});
}
function Show(){
var element = document.getElementById("Pause");
element.style="visibility: visible";
}
function Hide(){
var element = document.getElementById("Pause");
element.style="visibility: hidden";
}
</script>
<div id="div" onclick = 'Read("div")'>This is text to read.</div>
<br>
<input type = "button"
id = "Pause"
value = "Pause"
style = "visibility: hidden" />
</body>
</html>

You need to pass a function that calls Hide, rather than calling Hide immediately:
{onend: Hide("div1")}
calls hide as soon as that line is evaluated. It needs to be:
{onend: () => Hide("div1")}
<!DOCTYPE html>
<html>
<body>
<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<script>
function Voice(id){
var element = document.getElementById(id);
var text = element.innerText;
responsiveVoice.speak(text, "UK English Male", {onend: () => Hide("div1")});
}
function Hide(id){
var element = document.getElementById(id);
element.style="visibility: hidden";
}
</script>
<div id="div1">This is the first line.</div>
<div id="div2" onclick = 'Voice("div2")'>
This is the second line.
</div>
<br>
Click on the second line to play its text. The first line should be hidden after the message is played.<br>
But it is hidden IMMEDIATELY after clicking. What is wrong?
</body>
</html>

Related

Setting button.onclick via button click activates on first button press

So I'm trying to create a button that when pressed changes the content of an html page and updates the button to change its next function. However, whenever I use .onclick I end up printing the "2" to the console while still on the first press of the button. I've tried using .click as well, and the only thing that I can find that works is setting the function directly, however this is untidy and long. I wondered if there was another way to do this with cleaner code.
html:
<!DOCTYPE html>
<html lang="en-US">
<body>
<script src="Path_To_File"></script>
<p id="text">
<!-- text here -->
</p>
<button id="b1" type="button" onclick="pageFlip(1)">Button</button>
</body>
</html>
JS:
function pageFlip(page) {
var p = document.getElementById("text");
var b1 = document.getElementById("b1");
var b2 = document.getElementById("b2");
switch (page) {
case 1:
p.innerHTML = "newText";
b1.innerHTML = "newText";
b1.onclick = pageFlip(2);
break;
case 2:
console.log("2");
break;
}
}
What works:
b1.onclick = function changeButton() {
pageFlip(2)
}

How to make eventlistener add image to my page?

I have a button. When I click the button, I want an image of a cat to be created. I have created a function to do this. I have added an event listener to the button that triggers the function when the button is clicked. But no such image is created. Here's the code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="1">hello</button>
<script>
function create(){
var image= document.createElement("img")
image.src="https://encrypted-tbn0.gstatic.com/images?
q=tbn%3AANd9GcQeP6zBFWjK10gNYUK1kxM6I-AbF8vK_zPGSHrk38JzCb_5ZpRd&usqp=CAU"
document.body.appendChild(image)
}
var element=document.getElementById("1")
element.addEventListener("click", create)
</script>
</body>
</html>
That because the url got corrupted and white space got introduced between images? and next line. Concat them using + or copy the url , try in the browser and then copy the same url from browser and put it between quotes
function create() {
var image = document.createElement("img")
image.src="https://encrypted-tbn0.gstatic.com/images?"+
"q=tbn%3AANd9GcQeP6zBFWjK10gNYUK1kxM6I-AbF8vK_zPGSHrk38JzCb_5ZpRd&usqp=CAU";
document.body.appendChild(image)
}
var element = document.getElementById("1")
element.addEventListener("click", create)
<button id="1">hello</button>
Add semicolons and remove the linebreak in the url:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="1">hello</button>
<script>
function create(){
var image= document.createElement("img");
image.src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQeP6zBFWjK10gNYUK1kxM6I-AbF8vK_zPGSHrk38JzCb_5ZpRd&usqp=CAU";
document.body.appendChild(image);
}
var element=document.getElementById("1");
element.addEventListener("click", create);
</script>
</body>
</html>

Why Is The ID class i styled on my seperate .JS page not working

So this is what i did when i used the put the JavaScript on a separate page: Why is it not working?????(And i made sure the source page name is yellow.js and i just dont know how to seperate the javascript file on here)
<!DOCTYPE html>
<html>
<head>
<script src="yellow.js"></script>
</head>
<body>
<h1 id="box" onload="change()">NBA Legends</h1>
</body>
</html>
function change() {
var box = document.getElementById("box");
boxStyle = box.style;
boxStyle.color = 'red';
}
window.onload = function change()
{
var box = document.getElementById("box");
var boxStyle = box.style;
boxStyle.color = 'red';
}
<!DOCTYPE html>
<html>
<head>
<script src="yellow.js"></script>
</head>
<body>
<h1 id="box" onload="change()">NBA Legends</h1>
</body>
</html>
Here is the difference between both
window.onload - it is called after all DOM, JS files, Images, Iframes, Extensions and others completely loaded. This is equal to $(window).load(function() {});
onload="" - It is called once DOM loaded. This is equal to $(document).ready(function() {});
It is always good to write clean code and I always prefer to use window.onload, instead of using onload event on element.
First put your javascript code into the body.If you want to change color when the page load you can use window.onload = change() event. And your boxStyle variable is not defiend before you use it.I did some changes .
<body>
<h1 id="box">NBA legends</h1>
<script type="text/javascript">
function change() {
var box = document.getElementById("box");
var boxStyle = box.style;
boxStyle.color = 'red';
}
window.onload = change();
</script>
</body>

Bgcolor change of div with link

I am trying to make a webpage so that when a link is clicked, it doesn't go to a page, it changes the background color of a sentence in a div, and also changes the sentence. So far it goes to the page, which is fake.
HTML:
<html>
<head>
</head>
<body>
<div id="div1">
Sentence 1
</div>
<div id="div2">
Click to change bgcolor!
</div>
<script type="text/javascript" src="jsdemo.js"></script>
</body>
</html>
JavaScript- jsdemo.js:
function mousedown()
{
document.getElementById('div1').style.backgroundColor="#CCCCCC";
document.div1.innerHTML = "Sentence 2"
}
Get rid of that inline event handler, and use
var div1 = document.getElementById('div1');
document.getElementById('c_link').addEventListener('click', function(e) {
e.preventDefault(); // Avoid following the link
div1.style.backgroundColor = "#CCCCCC";
div1.innerHTML = "Sentence 2";
});
Demo
Try this, and also, why does your <a> tag have a href leading to another page?
<a href="javascript: void(0)"/>
<div>Sample text</div>
<script>
var a = document.getElementsByTagName("a")[0];
var div = document.getElementsByTagName("div")[0];
a.onclick = function() {
div.style.backgroundColor = "#cccccc";
}
</script>
Its better to change onmousedown event to onclick event.
var link = document.getElementById('c_link');
link.onclick = function(e){
e.preventDefault();
var div1 = document.getElementById('div1');
div1.style.backgroundColor = "#CCCCCC";
div1.innerHTML = "Sentence 2";
}
The second sentence doesn't seem to find the div, do this:
function mousedown() {
var container = document.getElementById('div1');
container.style.backgroundColor = "#CCCCCC";
container.innerHTML = "Sentence 2";
}
And change the link to
<div id="div2">
Click to change bgcolor!
</div>
I saw the other response, and I found that this answer is still valid under two assumptions:
You won't need to apply other event handlers to this element and event;
You need compatibility with old browser.
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener#Older_way_to_register_event_listeners

onmouseout event not working with h1 tags

I am trying onmouseout and onmouseover events. Below code is working fine if i remove tags, what is confusing me is , with tags, only mouseover is firing and not mouseout. Please guide what i am doing wrong.
<!DOCTYPE html>
<html>
<body>
<div onmouseout="mouseout();" onmouseover="mouseover();" id="test"><h1> Mouse </h1> </div>
<div id="count"> </div>
<div id="count2"> </div>
<script>
var textonout = "<h1>Mouse out</h1>";
var count =0;
var out = 0;
var textonover = "<h1>Mouse Over</h1>";
function mouseout() {
document.getElementById("test").innerHTML = textonout;
document.getElementById("count2").innerHTML = out++;
}
function mouseover() {
document.getElementById("test").innerHTML = textonover;
document.getElementById("count").innerHTML = count++;
}
</script>
</body>
</html>
EDIT: Ok i think i understand my own question. In my case, onmouseout event doesnt fire if i have nested tags. I have tried the same code just replacing h1 tag with a div tag. I tried several combination (using span etc) as soon as i introduce any tag inside my first div, onmouseout stops working.
Can someebody guide me what is the issue ? i am not asking for the fix, i just want to understand the reason of this error.
EDIT(2). Another update, if i add the following lines, now the onmouseout event is triggering.
function mouseover() {
document.getElementById("test").innerHTML = textonover **+ count**;
document.getElementById("count").innerHTML = count++;
DEMO
Uncaught ReferenceError: mouseout is not defined
You had this error in your console. I admit, I prefer to seperate js and html. Call your events in your JS.
Additionally, you don't need to recreate an h1 everytime you want to change the text. Just add an id to your h1, and replace the text inside of it.
HTML:
<div id="test">
<h1 id="h1"> Mouse </h1>
</div>
<div id="count"></div>
<div id="count2"></div>
Javascript:
var h1 = document.getElementById('h1');
textonout = "Mouse out";
var count = 0;
var out = 0;
var textonover = "Mouse Over";
var test = document.getElementById("test");
test.onmouseout = mouseout;
test.onmouseover = mouseover;
function mouseout() {
h1.innerHTML = textonout;
document.getElementById("count2").innerHTML = out++;
}
function mouseover() {
h1.innerHTML = textonover;
document.getElementById("count").innerHTML = count++;
}
Follow this , it work perfect.
<!DOCTYPE html>
<html>
<body>
<h1 id="test"> Mouse </h1>
<div id="count"> </div>
<div id="count2"> </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var textonout = "Mouse out";
var count =0;
var out = 0;
var textonover = "Mouse Over";
$("h1").mouseover(function(){
$("h1").css("background-color","yellow");
document.getElementById("count").innerHTML = count++;
document.getElementById("test").innerHTML = textonover;
});
$("h1").mouseout(function(){
$("h1").css("background-color","lightgray");
document.getElementById("test").innerHTML = textonout;
document.getElementById("count2").innerHTML = out++;
});
});
</script>
</body>
</html>

Categories

Resources