Change html text using jQuery - javascript

I'm trying to change the text of h2 , when the user clicks a button.
Javascript :
$("#GoButton").click(function() {
$("#myDiv").html("Hello World");
});
and the html :
GO
I have tried to switch links so jQuery will load first (that solved another problem).
Still can't find what im doing wrong.
Also tried :
$("#GoButton").click(function() {
$("#myDiv").innerHtml("Hello World");
});

You need ensure if DOM is loaded already using $(function(){.. }); and prevent default behaviour of link using e.preventDefault()
$(function(){
$("#GoButton").click(function(e) {
e.preventDefault();
$("#myDiv").html("Hello World");
});
});
Demo

Your javascript (binding a function on the click) may be executed too early, like in this example : http://jsfiddle.net/ug7f0te1/
Try binding events after the DOM is fully loaded:
$(function(){
$("#GoButton").click(function() {
$("#myDiv").html("Hello World");
});
});

This should work for you
$("#myDiv").html("Hello World");

here is the code http://jsfiddle.net/utkarshk/h0vmmdn8/
HTML:
<div id="mydiv">fd</div>
<h2 id="mydiv1">4343</h2>
GO
JS.
$("#GoButton").click(function() {
$("#mydiv1").html("Hello World");
$("#mydiv").html("Hello World");
});

Might be clearer if you post all your HTML. From a guess, here's something which does what I think you want:
<html>
<body>
<div id="myDiv">
<h2 id="myHeader">Click Go</h2>
<p>GO</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#GoButton").click(function() {
$("#myHeader").html("Hello World");
});
});
</script>
</body>
</html>

if you just want to change text than you can make use of text() not of html() method
$("#myDiv").text("Hello World");
Update
this is working you need to do proper setting for this in jquery : http://jsfiddle.net/0oc53fdd/5/

<!DOCTYPE html>
<html>
<script type="text/javascript">
function here()
{
//alert(document.getElementById("myHeader").innerHTML);
document.getElementById("myHeader").innerHTML = "Hello World";
}
</script>
</head>
<body>
<div id="myDiv">
<h2 id="myHeader">Header</h2>
<button id="GoButton" onclick="here();">GO</button>
</div>
</body>
</html>
Hope you can get something from it.

Related

jquery click event priority over inline click

I have the following code
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<span class='click2' onclick="ClickBack();">Click me </span>
</body>
<script>
$(".click2").click(function (event) {
if(confirm("Sure to continue"))
event.stopImediatePropagation();
});
function ClickBack() {
alert('yes I am click1');
}
</script>
</html>
My requirement is to call ClickBack() only when its being confirmed by , and i cannot make any change in ClickBack function , Its ony one case,
main thing is
I have to add this click2 to a number of elements, and it will basically call the inline events only after confirmation by click2
$(".click2").click(function (event)
I am getting two issue,
ClickBack is being fired firstly,
TypeError: event.stopImediatePropagation is not a function it was type mistake thanks to #manwal its solved
How can I achieve my goal.
I cannot make any change in ClickBack() function
Please advise
Thanks
You have typo issue, use this line there should be double m:
event.stopImmediatePropagation()
instead of
event.stopImediatePropagation()
^
for this ClickBack is being fired firstly, problem the solution is remove onclick="ClickBack();" from
<span class='click2' onclick="ClickBack();">Click me </span>
First of all if you bind inline onclick function it will be trigerred first.
So instead of adding it inline do it in your script like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<span class='click2'>Click me </span>FD
<script>
$(".click2").click(function (event) {
if (confirm("Sure to call ClickBack"))
{
ClickBack();
}
});
function ClickBack() {
alert('yes I am click1');
}
</script>
</body>
</html>
Remove onclick event handler from span
<span class='click2'>Click me </span>
and call the ClickBack function in on click event handler for .click2 class as follows,
<script>
$(".click2").click(function (event) {
if(confirm("Sure to call ClickBack"))
ClickBack();
});
function ClickBack() {
alert('yes I am click1');
}
</script>
Try this
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<span class='click2'>Click me </span>FD
<script>
$(".click2").click(function (event) {
if (confirm("Sure to call ClickBack"))
{
ClickBack();
}
});
function ClickBack() {
alert('yes I am click1');
}
</script>
</body>
</html>

jquery not working in my code

I tried using jQuery on my website, but it did not seem to work. this code doesn't work. When I click on #test, it doesn't hide. Please help. Thanks!
this is my Html file :
<!DOCTYPE html>
<html>
<head></head>
<body>
<p id="#test">Hello world !</p>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/code.js"></script>
</body>
</html>
this is my code.js :
$(document).ready(function() {
$('#test').click(function() {
$('#test').hide();
});
});
your html is wrong, remove hash # sign:
<p id="test">Hello world !</p> // this is right
while you have written:
<p id="#test">Hello world !</p> // this is wrong
NOTE:
you can get current element reference using this:
$(document).ready(function() {
$('#test').click(function() {
$(this).hide();
});
});
$("#test") means that select element which has id equal to test
Try to escape the meta character with \\,
$(document).ready(function() {
$('#\\#test').click(function() {
$('#\\#test').hide();
});
});
DEMO

Call Onclick of Div Using javascript

I want to alert something in the onclick event of a div .
This is my code:
<script type="text/javascript">
document.getElementById('new_div').click(function() {
alert(1);
});
</script>
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
But when loading the page it displays an error:
document.getElementById("new_div") is null
What is the problem in my code?
Edit: This should be a better solution, I'm a bit rusty in JavaScript.
You need to load your JavaScript event handlers after the page is loaded. The simplest way is making your code load when the document finishes loading and the window casts an onload-event.
<script type="JavaScript">
window.onload = function(){
document.getElementById('new_div').onclick = function() {
alert("Good morning, you are very beautiful today!");
}
}
</script>
you defined that div after your javascript code, so when you add your handler the div doesn't exist yet
reverse your code like so
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
<script type="text/javascript">
console.log(document.getElementById('new_div'))
</script>
to correctly attach an event use addEventListener (and attachEvent for IE<9)
or simply use document.getElementById('new_div').onclick = ... (but not recommended since you remove any previous defined handler, if any)
The new_div is not yet loaded when your javascript executes.
Try something like this:
$(document).ready(function()
{
$('#new_div').click(function()
{
alert(1);
});
});
Edit
I assume you use jQuery because you use .click(function() {
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function clicked(item) {
alert($(item).attr("id"));
}
</script>
<div onclick="clicked(this);" id="test">test</div>
I think you jquery solves your problem beautifully.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#new_div').click(function() {
alert(1);
});
});
</script>
your HTML stays the same
try this
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$("#new_div").click(function(){
alert(1);
});
});
</script>
</head>
<body>
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
</body>
</html>

How to use a javascript instance in jquery/Select a javascript handle via jquery?

As a jquery-beginner, i should bind a javascript object into my jquery functions, like:
<div title="StackOverflow" onclick="javascript:action(this)">Content</div>
and in action i will handle the "this" :
function action(instance){
example=instance.attr("title");
}
but the "instance" is not a jquery object so i can't work with it. The syntax
example=$(instance).attr("title");
doesn't help me either.
I'd be glad of any suggestions
If you're using jQuery then you should completely separate the definition of your HTML and associated JavaScript. For example
HTML:
<div id="soDiv" title="StackOverflow">Content</div>
JavaScript:
$(document).ready(function() {
$('#soDiv').click(function() {
var example = $(this).attr('title');
...
});
});
this should work...
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
function action(instance){
example=$(instance).attr("title");
alert(example);
}
</script>
</head>
<body>
<a id="test" title="StackOverflow" onclick="javascript:action(this)" href="#">Content</a>
</body>
</html>
// HTML file
<div title="StackOverflow" id="stackoverflow">Content</div>
// JS File
document.getElementById("stackoverflow").addEventListener("click", function () {
var example = this.getAttribute("title");
});
Seperations of concerns
HTML:
<div title="StackOverflow" id="stack">Content</div>
Javascript (with jQuery):
$('#stack').click(function(){
alert(this.title);
});

JQuery hide div - resulting in javascript error

I have the following html in page:
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
function hideIt() {
$(this).hide("slow");
return true;
}
</script>
</head>
<body>
<div onclick="hideIt();">
hello world
</div>
</body>
When I click on the div, it results in the following JavaScript error:
Line: 53
Error: 'this[...].style' is null or not an object
Any solutions?
There are no definition to this object in that scope.
Use selectors instead:
<div class="ready_to_hide">
hello world
</div>
$('.ready_to_hide').click(function(){
$(this).hide();
});
this refers to the current object. For your code to work you have to pass a reference to the div element by passing this inside the function call.
The main advantage of using jQuery is to separate markup and script. So you won't write event handlers inside the markup. You can write event handlers only after the DOM is ready.
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(function(){
$("#divToHide").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div id="divToHide">
hello world
</div>
</body>
A detailed reading on Unobtrusive JavaScript
This should fix it
<div onclick="hideIt(this);">
and
function hideIt(o) {
$(o).hide("slow");
return true;
}
$(this) will only be your DIV if you bind the event with jQuery:
$('#myDiv').click(hideIt);
The way you're doing it, you need to pass a reference to the object:
<div onclick="hideIt(this);">
and use that in your function:
function hideIt(obj) {
$(obj).hide("slow");
return true;
}
Try this:
<script>
function hideIt(item) {
$(item).hide("slow");
return true;
}
</script>
<div onclick="hideIt(this);">
hello world
</div>

Categories