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
Related
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>
I have to create the effect of a popup using a DIV with DOM, I used an iframe, inside the frame is a form, I can not get rid of the div with Javascript in the submit button because the DOM sees only after the iframe his creation and not the div that contains it ... how should I do?
<html>
<body >
<h1>Title</h1>
</body>
</html>
//Global variable which contain reference to divPopup's element
var divPopup;
function hideDiv() {
window.alert("Content of DIV POPUP " + divPopup );
divPopup.className = "overlayHidden";
}
function load_page() {
var nodoDiv = document.createElement("DIV");
divPopup = nodoDiv;
nodoDiv.className = "overlay";
nodoDiv.setAttribute("id", "popup1");
//nodoDiv.addEventListener("click", function () { hideDiv(); }, false);
document.body.appendChild( nodoDiv );
var nodoDivPopup = document.createElement("DIV");
nodoDivPopup.setAttribute("id", "popup2");
nodoDivPopup.className = "popup";
var elem = document.getElementById("popup1");
divPopup = elem;
elem.appendChild( nodoDivPopup );
var nodoDivEsami= document.createElement("DIV");
nodoDivEsami.setAttribute("id", "contenitoreEsami");
nodoDivEsami.className = "content";
var elem = document.getElementById("popup2");
elem.appendChild( nodoDivEsami );
var nodoIFrame = document.createElement("IFRAME");
nodoIFrame.className = "content";
nodoIFrame.setAttribute("src", "esami_da_importare_TEST.html");
var nodoDivEsami = document.getElementById("contenitoreEsami");
nodoDivEsami.appendChild( nodoIFrame );
//window.alert( document.body.innerHTML );
}
_______file css
.overlayHidden{
visibility:hidden;
opacity:0;
}
the function hideDiv() is in the form, activated onClick on submit button.
the window.alert( ) in function hideDiv return "undefined"...
I think you're trying too hard, as iFrames are notoriously problematic. You don't need to use an iFrame, and you can predefine your DIVs in the HTML (unless you really need to create the DIV dynamically). For example:
<div id="popup1" class="overlayHidden">
<div id="contenitoreEsami" class-"content">
...
</div>
</div>
No code is needed for page load. When you want to display the pop-up, change its class to something that isn't hidden.
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>
For the last 20 minutes I've been befuddled by such a simple problem that it's almost embarrassing to ask. Basically I want to create an anchor tag for a div which already exists but I want to use the DOM to create the anchor. For some reason I cannot get this simple problem to work. Tried single quotes and double quotes, moving the script tag from head to body, etc...
Here's the code
<html>
<head>
</head>
<body>
<div id = "image_div">
<img src = "my_image.png" />
</div>
<script type="text/javascript">
var DIV = document.getElementById("image_div");
var anchor = document.createElement("a");
anchor.href = "http://www.stackoverflow.com";
DIV.appendChild(anchor);
</script>
</body>
</html>
Your Example is Working Fine.. And also Append your a Child to DOM, but You have to Insert a text and some Sign for that it is Shown to click..
var DIV = document.getElementById("image_div");
var anchor = document.createElement("a");
anchor.href = "http://www.stackoverflow.com";
anchor.innerText = "Click Me";
DIV.appendChild(anchor);
See Fiddle
Or If you wanna Wrap,the a Anchor tag to img then use :
var DIV = document.getElementById("image_div");
var img1 = document.getElementById("img1");
var anchor = document.createElement("a");
anchor.href = "http://www.stackoverflow.com";
anchor.appendChild(img1);
DIV.appendChild(anchor);
WORKING DEMO
You didn't put any text in the anchor so it won't have any size and thus you won't see it even though it's there.
var DIV = document.getElementById("image_div");
var anchor = document.createElement("a");
anchor.href = "http://www.stackoverflow.com";
anchor.innerHTML = "Click Me"; // <==== Add this line
DIV.appendChild(anchor);
I am trying to change the contents of a div without using jQuery. I want to select the div by id or class.
Ive managed to get append to work:
function appendHtml(targetC, htmldata) {
var theDiv = document.getElementById(targetC);
var newNode = document.createElement('div');
newNode.innerHTML = htmldata;
theDiv.appendChild(newNode)
}
But cant figure out how to change text of one..
Any ideas?
see this fiddle for a basic sample
<html>
<head>
<script>
function bold(targetC) {
var theDiv = document.getElementById(targetC);
theDiv.innerHTML = '<b>' + theDiv.innerHTML + '</b>';
}
</script>
</head>
<body onload='bold("message")'>
<div>Hello, World!</div>
<div id="message">What a nice day!</div>
</body>
</html>
Edited:
<div id="foo">old text</div>
The JS code:
function appendHtml(targetC, htmldata) {
var theDiv = document.getElementById(targetC);
theDiv.innerHTML = htmldata;
}
appendHtml('foo', 'new text');
Here is a fiddle: http://jsfiddle.net/7QjcB/
simply change the html of a div by using innerHTML
var anyDiv = document.getElementById(targetID);
html = "content";
anydiv.innerHTML(html);
as a variation of your provided function:
function changeHtml(targetC, htmldata) {
var theDiv = document.getElementById(targetC);
theDIV.innerHTML = htmldata;
}
Here is a fiddle that might answer your question. All I changed was getting the element before and then passing it in.
function appendHtml(targetC, htmldata) {
var newNode = document.createElement('div');
newNode.innerHTML = htmldata;
targetC.appendChild(newNode);
}
var getDiv = document.getElementById("testing");