my very simple html code, actually my javascript code is not working, here is my code:
<!DOCTYPE html>
<html>
<head>
<script>
function write(){
document.getElementById("div1").innerHTML = "hello world";
}
</script>
</head>
<body>
<div id="div1" onclick="write()">hello</div>
</body>
</html>
i want to change the <div> content to "hello world". but when i try to do it, when i click the <div> element, its content is erased and it gives me a blank page. what am i doing wrong? any help would be appreciated.
That happens because 'write' is already defined as a method from the document object. You need to change the name of the method to something else.
Related
I'm not too sure why the code below doesn't work in the browser. Any ideas?
<!DOCTYPE html>
<html>
<script>
function click() {
alert("You clicked on a paragraph");
}
</script>
<body>
<p onclick="click()" id="paragraph">This is a paragraph</p>
</body>
</html>
I figured out how to do the above with the document.getElementById function (see below).
<!DOCTYPE html>
<html>
<script>
function click() {
alert("You clicked on a paragraph");
}
</script>
<body>
<p id="paragraph">This is a paragraph</p>
</body>
<script>
document.getElementById("paragraph").onclick = function() {
click();
}
</script>
</html>
My question is why the first approach doesn't work?
Your first function doesn't work because click() is a built-in function in JavaScript which simulates a mouse-click on an element. Here is a demo. So when you click on the paragraph the built-in function is executed first instead of your function which displays the message through alert() function
Since your second function is an anonymous function it executes without any error.
To solve it simply rename it to any other name except the name of a built-in function. Refer the code snippet below for example.
<!DOCTYPE html>
<html>
<body>
<script>
function alertOnclick() {
alert("You clicked on a paragraph");
}
</script>
<p onclick="alertOnclick()" id="paragraph">
This is a paragraph
</p>
</body>
</html>
Went through your Code #sb2021
I think it is well resolved by #rifkyniyas
But I would like to give you a suggestion.
Try to place the script tag inclusions just before the closing of body tag. Placing scripts at the bottom of the element improves the display speed, because script interpretation slows down the display.
Something just like this
<body>
.
.
.
.
.
.
<script>...</script>
</body>
Check this out
I'm trying to figure out why my function $ is not displaying the location of my link:
<html>
<head>
<title>Link Test</title>
</head>
<body>
<a id="mylink" href="hxxp://mysite.com">Click me</a><br>
<script>
$('mylink').href
function $(id)
{
return document.getElementById(id)
}
</script>
</body>
</html>
here is your code modified to output the href value in three different ways, pick which ever you like.
<html>
<head>
<title>Link Test</title>
</head>
<body>
<a id="mylink" href="hxxp://mysite.com">Click me</a><br>
<span id="out"></span>
<script>
console.log($('mylink').href);
document.getElementById('out').innerHTML=$('mylink').href;
alert($('mylink').href);
function $(id)
{
return document.getElementById(id)
}
</script>
</body>
</html>
however I am pretty sure that's not your intent. I am not sure why you are using $ as your function name, nor why are you trying to output the href. Your intent is not clear, but I have a feeling you are not approaching things correctly.
You aren't doing anything with the href property.
Your code is equivalent to:
<script>
"hxxp://mysite.com";
</script>
You need to pass it to a function that will display it (such as console.log or alert).
I personally don't see anything wrong with your code... Though it may not be perfect and fit all the standards, it seems fine to me. If you just want to output it or something, because it isn't doing anything now, use the following code:
document.write("Link Address: " + $('mylink').href)
Here is an example.
What i want to do is simple. When i click the image, i want some message to appear.
Afterwards, when i click it again i want it to disappear. I have problems iplementing it
due to my lack of jQuery knowledge. I would appreciate some help with the following code, as well as some other implementations. I know i can do something with class="hidden" and have jQuery add/remove it but oh well.
This is what i'm trying to work with.
<!DOCTYPE html>
<html>
<head>
<script>
function greet(){
a = document.getElementById('here');
if (a.trim().length==0){
a.innerHTML = 'message!';
}
else{
a.innerHTML = '';
}
</script>
</head>
<body>
<img src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt" onclick="greet()"/>
<p id='here'></p>
</body>
</html>
EDIT: seems like i should use a.value, but i must be doing something else wrong too.
If you are using jQuery it is very simple; just use this as your JavaScript (don't forget to link the jQuery main library - I like the Google CDN for that). Just use the toggle function:
function greet() {
$('#here').toggle();
}
Also it is better to register the onClick through jQuery rather than your html (for examplesee this SO question). So that would be like this for the whole page instead :
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document).ready(function() {
$("#greet").click(
function () {
$('#here').toggle();
}
);
$("#here").hide();
}
</script>
</head>
<body>
<img id="greet" src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt"/>
<p id='here'><!--MESSAGE SHOULD BE HERE--></p>
</body>
</html>
Working example in jsFiddle.
Hi I am learning to build Chrome Extensions and am very new to this field. I am working on a very basic extension here and even before I have started on the main task, I am stuck in my demo code. I simply wish to print "hello" or any message in my paragraph tag when I click my extension.
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>hi</title>
<style>
p
{
color:red;
font-size:20px;
}
</style>
<script src="getMSG.js"></script>
</head>
<body>
<p id='content'></p>
</body>
</html>
And here is the code for getMSG.js:
document.getElementById('content').innerHTML = 'Hello';
My extentsion was working just fine when I simply wrote "Hello World" in my HTML code. But now when I do this I get no output at all. Please can someone help with this? Thanks in advance :)
To access the properties of a DOM element you need to do that operation when the window load:
// Using pure JavaScript
window.onload = function() {
document.getElementById('content').innerHTML = 'Hello';
}
I was tested your code and it doesn't work, i think the content page wasn't loaded completely,
So it's preferred to use jQuery accompany this code in your "getMSG.js":
$(document).ready(function () {
document.getElementById('content').innerHTML = 'Hello';
});
Works fine for me.
I'm sure this is a fairly basic question, but I'm relatively new to jQuery so was hoping someone might be able to help.
Basically, I need to load an HTML snippet into a page. This works fine when the snippet contains just HTML, but not when it contains a script.
I've stripped down my code to the bare minimum for clarity. This is index.html:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<h1>Heading</h1>
<div id="banner"></div>
<script>
$(document).ready(function(){
$('#banner').load('banner.html');
});
</script>
</body>
</html>
And banner.html contains just the following (as an example):
<h2>Subheading</h2>
<script>
document.write('Hello');
</script>
The script is executed, but for some reason it strips out the rest of the HTML in both index.html and banner.html (i.e. it just displays "Hello" and nothing else).
Any help greatly appreciated!
document.write after the page has load writes to the document, and at the same overwrites everything else currently in the document, that's why you end up with only the string "hello".
Just remove the document write :
<h2>Subheading</h2>
<p id="test"></p>
<script>
document.getElementById('test').innerHTML = 'hello';
</script>
that is becuase when banner.html is loaded .. the script inside banner.html get executed, which writes "hello" in your document(the document here is your entire index.html)
one way to understand this is by replacing certain content of banner.html rather than the whole document.
banner.html
<h2>Subheading</h2>
<div id="divID"></div>
<script>
$('#divID').html('hello'); //using jquery .. gets the element with id as divID and replace the HTML
</script>
here i am replacing just the div whose id is "divID" rather than replacing the enrite document