Changing text in HTML - javascript

This works but only half way. It'll change the element I want changed but it changes immediately instead of after 9 seconds. Sorry if this is a dumb question I'm new and not sure if this is even how to change text the correct way.
<script type="text/javascript">
setTimeout(changeText,9000);
function changeText(){
var textChange = document.getElementById('change').innerHTML = 'IS LIfe';
}
changeText();
</script>

The setTimeout is not the only place that you are calling the function, you're also calling it at the end. Remove the last call and it will work.
setTimeout(changeText,9000);
function changeText(){
var textChange = document.getElementById('change').innerHTML = 'IS LIfe';
};

If you want to show the text only after 9 seconds, please remove the last line of function calling. That is triggering when page loads.
setTimeout(changeText,9000);
function changeText(){
var textChange = document.getElementById('change').innerHTML = 'IS LIfe'; }

Remove changeText(); at the bottom. It is an extra call and not-needed since setTimeout will invoke your callback

Related

Why I can't define a DOM element as a global variable?

I'm working on a form and wanted to use Javascript to output the form input.
So I have following script:
<script>
function showName() {
var box = document.getElementById("lorem").value;
console.log(box);
}
showName();
</script> `
The code above works really well but I wanted the var box = document.getElementById("lorem").value; to be a global variable so that I can use it in other functions without re-declaring it.
So when I have this it doesn't output anything:
`
<script>
//Declared outside the function
var box = document.getElementById("lorem").value;
function showName() {
console.log(box);
}
showName();
</script>
Please, what am I doing wrong?
You can use the same. it is not a problem. if you are still getting the null error, I would suggest to add the script at the end of the document or enclose it in a document.addEventListener("DOMContentLoaded", function(event) { block like below
document.addEventListener("DOMContentLoaded", function(event) {
var box = document.getElementById("lorem").value;
function showName() {
console.log(box);
}
showName();
});
<input type="text" value="hai" id="lorem"/>
The value of box is the initial value of your lorem element when you declare it. What you probably want is this:
var box = document.getElementById('lorem');
function showName() {
console.log(box.value); // <-- get the current value
}
// Outputs the current value, initially it will be empty
// of course, until you change your input and call the
// function again
showName();
Edit: the DOM needs to be loaded for this to work so make sure to put your script tags last in your <body>
You can either put the script all the way at the end before you close the <body> tag, or do as #jafarbtech suggested and add an event listener to wait for the DOM content to load.

How to highlight my text

I have some text and a button. Once user clicks a button I want the text's background to change color to green and back. But nothing happens if I click the button...
Here's the JS script:
<script>
function bright(){
kontakt = document.getElementById('kontakt');
kontakt.bgcolor = '#A5DF00';
}
function dark(){
kontakt = document.getElementById('kontakt');
kontakt.bgcolor = '#000000';
}
function highlight(){
setTimeout(bright() , 1000);
setTimeout(dark() , 1000);
}
</script>
I call the highlight() from the button's onclick attribute like this: onclick='highlight()'.
The text with id kontakt is always on the page.
Any clue?
The css property are accessible through the style property:
var kontakt = document.getElementById('kontakt');
function bright(){
kontakt.style.backgroundColor = '#A5DF00';
}
function dark(){
kontakt.style.backgroundColor = '#000000';
}
All CSS properties can be accessed the same way. if the property has a dash in it z-index just use the camel case notation.
Ex: kontakt.style.zIndex
you also need to update your setTimeout like so:
function highlight(){
setTimeout(bright , 1000);
setTimeout(dark , 2000);
}
In your case you were calling the functions and passing whatever they return to setTimeout. You also want to change the timer for the first function to happen after a second, and the next follows one second after.
According to your code, when highlight() is called it will wait for one second and then turn the background from whatever it was to green and immediately to black, as fast as it possibly can. I'm guessing that you don't see it flash green because that's faster than the browser renders or your eye can detect.
Try changing setTimeout(dark , 1000); to setTimeout(dark , 1500);.
jsfiddle example here modified based on this SO answer.
<span id='kontakt' onClick="highlight(this);">Click me to see me change color and back</span>
function highlight(obj){
var orig = obj.style.color;
obj.style.color = '#f00';
setTimeout(function(){
obj.style.color = orig;
}, 5000);
}
I would recommend using jquery for this problem. You can download it here. And use it by updating your head-section in your html-document with
<head>
other code...
<script src="directory/where/you/installed/jquery"></script>
</head>
now you can highlight the text with the id 'kontakt' by using following functions:
<script>
$(document).ready(function(){ //this ensures that all elements have been loaded before you are executing any js
function highlight(){
$("#kontakt").css("background-color", "#A5DF00");
setTimeout(function(){
$("#kontakt").css("background-color", "#000000");
}, 1000);
};
// now to execute highlight() by clicking on the button you use
$("#id-of-the-button").click(highlight();
// there is no further need of the onclick attribute for your button
}
</script>
For more information on how to use jquery you can visit w3schools. They have a lot of very nice tutorials for exactly those tasks.

Get html from element from iFrame every 10 seconds

So i've been looking around for a while for a possible solution to make a javascript, jquery which searches in the iFrame for a certain class or id element. Then takes out the html inside of it. (example. <a id="link">Here's a link</a> ). then makes it a string out of it and also replay this function every 5 second or so. Is there anyone who know a good solution to this or a tutorial?
I've tried the function var inf = $('#iframeid').contents().find('#theid').html();but it didn't gave any success.
Try this:
function GetFrameData() {
var $MyFrame = $("#iframeid");
// You need to wait for the iFrame content to load first
// So, that the click events work properly
$MyFrame.load(function () {
var frameBody = $MyFrame.contents().find('body');
var inf = frameBody.find('#theid').html();
});
}
// Call the function every 5 seconds
setInterval(GetFrameData, 5000);

JavaScript Change Text in X Seconds - No Initial Display

I currently have a JavaScript file that will change the testimonial shown every five seconds. Everything works perfectly, except for the first five seconds, nothing appears. If I put a value where the JavaScript function is being called, it does show up initially, then is replaced by whatever the first testimonial is.
Here is the HTML code where the JavaScript is being called.
<html>
<head>
<SCRIPT language="JavaScript" SRC="textCycle.js"></SCRIPT>
</head>
<body>
<table border = 0><tr><td style="width:300px;"> <!-- Change the height in order to determine width of quotes -->
<div id="change"></div></td></tr></table>
</body>
</html>
Here is the Javascript:
var quotes=new Array(5);
var i = 0;
var authors=new Array(5);
//Load Quotes into array
quotes[0]="\"Website is awesome!\"";
quotes[1]="\"Love it!\"";
quotes[2]="\"Awesome site!\"";
quotes[3]="\"This site was very informative and helped with my problem.\"";
quotes[4]="\"Best site for helping with this issue.\"";
//Load authors that correspond with the quote array
authors[0]="Anonymous";
authors[1]="Anonymous";
authors[2]="Anonymous";
authors[3]="Anonymous";
authors[4]="Anonymous";
//Call the changeText() function every 5000 miliseconds
setInterval(changeText, 5000);
//Function that determine what quote and author to put in html.
function changeText(){
document.getElementById("change").innerHTML=(quotes[i] + '<p style="text-align: right"><i>' + authors[i] + '</i></p>');
if(i == 4)
i = 0;
else
i++;
}
Is this just a matter of changing the javascript file so that quotes[0] is outside of the loop?
Note: The values in the arrays were changed to keep it anonymous. These aren't real testimonials.
Just add changeText() (call your function) anywhere in your code before setInterval(). Well, it is not mandatory.
Fiddle
If you add the call to changeText() as mentioned, it likely still will not work. This is because the DOM has not been parsed yet. You should call it after the DOM is ready. One way to do this would be to put it in the onload event. This is the easiest way without a third-party library, but also waits until all images have been loaded. Here is an example:
<body onload="changeText()">
setInterval waits the interval duration (5 seconds) before executing the first time.
You could just call it once before setting the interval, and you'll be good to go. Eg:
//Call the changeText() function every 5000 miliseconds
changeText();
setInterval(changeText, 5000);

Can't see problem in JS

I want that when mouse is over an image, an event should be triggered ONCE, and it should be triggered again only after mouse is out of that image and back again, and also at least 2 seconds passed.
If I leave my mouse over the image,it gets called like every milisecond,and by the logic of my function once you hover on the variable 'canhover' becomes 0 until you move mouse out
This code seems to have a bug and I cant see it. I need a new pair of eyes, but the algorithm is kinda logical
Working code :
<script type="text/javascript">
var timeok = 1;
function redotimeok() {
timeok = 1;
}
//
function onmenter()
{
if (timeok == 1)
{
enter();
timeok = 0;
}
}
//
function onmleave()
{
setTimeout(redotimeok, 2000);
leave();
}
//
$('#cashrefresh').hover(onmenter,onmleave);
function enter(){
$("#showname").load('./includes/do_name.inc.php');
$("#cashrefresh").attr("src","images/reficonani.gif");
}
function leave(){
$("#cashrefresh").attr("src","images/reficon.png");
}
</script>
I don't know if this will solve your entire problem (since we don't have a detailed description of what it is), but instead of:
$('#cashrefresh').hover(onmenter(),onmleave());
try:
$('#cashrefresh').hover(onmenter,onmleave);
And the same thing here:
setTimeout(redotimeok, 2000); // just the function name
Also, I don't see where you ever set timeok to zero. Do you mean to set timeok = 0 in onmenter()?
There are two methods in jquery for your problem:
.mouseenter() and .mouseleave()
Check out the demos there.
EDIT:
I thought hover was for mouseover and mouseout, sorry for confusion.
I checked your code again. And it seems that you're changing the image when mouse gets over the image, which forces browser to load the new image and the old image disappears for a very little while till the new one appears and i think this must be triggering both handlers continuosly and you're getting this behaviour.
Try not to change the source of the image, comment out that line and instead console.log("some message") there and see if the message is repeated as much as .load() was fired before.
Hope this helps.
Try changing onmleave function as follows:
function onmleave()
{
setTimeout(redotimeok, 2000);
leave();
}

Categories