Div contents not getting cookie value - javascript

I have a div as follows:
<div class="bubbly">
</div>
<script>
$('.bubbly').innerHTML=getCookie('adjective');
</script>
But the content in this div cannot be seen.
If i alert the cookie, i get the value in it.
But the div is not taking the value of cookie.
I want to have the contents of the cookie in this div.

You are mixing what looks like jQuery with plain JavaScript. So either you have to use the .html() method to set the content of the element:
$('.bubbly').html(getCookie('adjective'));
Or you have to get the DOM element out of the jQuery object if you want to use the native innerHTML property:
$('.bubbly')[0].innerHTML = getCookie('adjective');

Try
$('.bubbly').html(getCookie('adjective'));
assuming that your getCookie function works properly. innerHTML is a pure JavaScript thing.

If you want to use native DOM properties in a jquery object then do like this:
$('.bubbly')[0].innerHTML=getCookie('adjective');
You can do the same all in jquery like this:
$('.bubbly').html(getCookie('adjective'));
Also make sure to enclose your DOM manipulating code in a handler for the
DOM ready event, like this:
<div class="bubbly">
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.bubbly').html(getCookie('adjective'));
});
</script>

Related

Any way to take the preceding element?

<div id="TheDivIWantTheBelowScriptToAddress"></div>
<script>
document.getPreviousDiv().innerHTML = "YADDA"
</script>
Now I know that in JS I can easily reference an element by its ID like document.getElementById("blah").
However, when the page is being generated from templates, it sometimes might get tricky to ensure that the ids won't repeat. It would be more convenient if I could just reference the first element of a given type (like div or canvas) that lies before the script tag in which this script is included.
Can this be somehow done or do I have to write extra logic to ensure the uniqueness of divs?
I should use this:
<div></div>
<script>
document.currentScript.previousElementSibling.innerHTML = "blah";
</script>
The currentScript gets the current script element.
The previousElementSibling gets the previous element.
This looks like a job for .prev
$('selector').prev()
EDIT: and again without jquery:
var x = document.getElementById("item2").previousSibling.innerHTML;

html input onload does not work [duplicate]

Is it possible to trigger a Javascript script, when an input element or any other html element is rendered. This script should be triggered from within the html tag, so that we should be able to pass 'this' to the js function.
No, there is no such event.
However, a <script> tag placed directly after the HTML element would have a similar effect: It would be executed directly after the element has been rendered:
<input type="text" id="input123" value="Hello World!">
<script>
alert("Input123 is now ready:"+document.getElementById("input123").value);
</script>
In most cases, however, it is best to use the document-wide load (or DOMReady, or jQuery's .ready()) to start any script operations. The DOM will be fully ready then.
A way to simulate such an event is to create a custom data-* atttribute (HTML-5 valid) and use that as a selector. Then in the main javascript code, you can add a selector for anything which has this specific data-XXX attribute and evaluate the javascript code inside.
Example HTML code:
<div data-onload="sampleFunction('param1', 2)"></div>
Example Javascript code (using jQuery). It is also possible to use normal DOM to find elements with this attribute.
/* Find any element which has a 'data-onload' function and load that to simulate an onload. */
$('[data-onload]').each(function(){
eval($(this).data('onload'));
});
This works well. I actually use it in production.
No. However, any script placed after the markup of the input element, will be run with the input element available because it is parsed before the script. So, if this was all in the body:
<input id="a">
<script>document.getElementById('a');</script>
That would all work anyway.
I have an input element that gets dynamically added to the document and needs to get initialized.
It's not perfect, but here's a way to initialize the widget the first time the input is used:
<input onfocus="initwidget(this)">
There is a trick. There are onload and onerror events for inputs have type="image" src="..." attributes. You can use onerror by passing empty or always wrong to src and change the type to proper one when onerror event triggred:
function func(input) {
console.log("Input loaded");
input.type = "text";
input.value = "Worked!";
input.removeAttribute("src");
// ...
}
<input type="image" value="" onerror="func(this)" src=""/>
No this is not possible. You could however use jQuery + $(document).ready(function) to modify any input field you want right after the page has finished loading.
No, there is not. Just run your code from the document "ready" handler, or use something like jQuery to give you a way to run code at "ready" (which is when the DOM is complete but images may not have loaded).

Linking a Jquery/html variable to javascript

What I'm trying to do, is I have an HTML textbox, that I want to grab what is entered in, and use it as a variable in my javascript file, do I use jquery or is there a way to just access whatever text is entered directly in the javascript code?
In your HTML, give the input element an id like so:
<input type="text" id="myText">
Then in your javascript, to get the value, use:
var text = document.getElementById("myText").value;
This answer uses vanilla JavaScript rather than jQuery.
You can use jQuery for this. You should give an id to your HTML element or you can call it with its type. Create a variable, select the HTML element with jQuery selector and use val() method to grab its value:
var input = $('selector').val() ;
If you decide to use jQuery don't forget to add the jQuery library in your HTML's head tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
You can also look at val(), html(), and text() (to set a new value) methods in jQuery web page.

Replace text inside html tag (not between) using JavaScript

I see a lot of reference for replacing text between tags or replacing tags identified with an ID, but my task is quite different in that I need to replace part of the tag itself. For example, I want to change...
<body etc>
So that it becomes...
<body somestring etc>
The change needs to be performed in the browser using JavaScript, ie: after a CMS (like Wordpress) has finished with it.
Looks like you need to add new attribute to DOM element:
document.getElementsByTagName("html")[0].setAttribute("id", "something");
document['getElementsByTagName']('html')[0]['setAttribute']('attr', 'value');
If you are using jQuery you can accomplish this with a line like the following:
$("html").attr({foo:"bar", baz:"bing"});
If you run a wordpress website you might already be using jquery. With JQuery this is something easy
$('html').attr('id', 'bob');
//just for testing
alert($('html').attr('id'));
If you are setting the value of standard attributes, just use DOM properties:
document.getElementsByTagName("html")[0].id = 'foo';
or more simply:
document.documentElement.id = 'foo';
It's not a good idea to set non–standard attributes or properties, use data-* attributes instead.

what's wrong with this javascript code getElementById?

I have this code below..
<script> document.getElementById('example').style.background-color =
'#FFCC00';
</script>
<div id="example">This is an example.</div>
why does not it work?
The script runs before the element with the given id exists, and you have a DOM property name with a hyphen in it (which gets treated as the minus operator).
<!-- Put the element first -->
<div id="example">This is an example.</div>
<script>
// camelCase CSS property names when converting to DOM property names
document.getElementById('example').style.backgroundColor = '#FFCC00';
</script>
See a live example of the above snippit.
Instead of putting the element first, you can wrap your JS statement in a function and then call it after the element exists. You can have this happen automatically by binding it as an event handler to something suitable (such as the document load event).
You should write backgroundColor
2 things that need to change in your code.
As is, your code is in the wrong order. You need to have the HTML first and then the JS. The element doesn't yet exist in this order, the JS is being executed first and the DOM object is not yet there.
There is no "background-color" property. Instead use ".backgroundColor". The dashes are usually replaced with camel casing.
Here is a working example:
<div id="example">This is an example.</div>
<script>
document.getElementById('example').style.backgroundColor = '#FFCC00';
</script>
Another tip:
If you want to remove the order as a dependency, you can wrap the JavaScript in a "onload" event handler.
Change the <script> to be below your element and use backgroundColor
<div id="example">This is an example.</div>
<script>
document.getElementById('example').style.backgroundColor ='#FFCC00';
</script>
Update:
<div id="example">This is an example.</div>
<script>document.getElementById('example').style.setProperty('background-color','#fco','important');</script>
,'important' is not required

Categories

Resources