HTML Javascript Onclick? - javascript

CAN ANYONE PLEASE HELP ME FIND OUT WHY THE ONCLICK ISNT WORKING... I also have a CSS sheet connecting my span classes but for some reason onclick isnt working...
<head>
<link href="stylizing.css" rel="stylesheet">
<script>
function showCode()
{
document.getElementById("latestDiscountCode").className ="unhideBlock textAlignLeft";
}
</script>
</head>
<p class="textAlignLeft" onclick = "showCode();">
<span class="xxx">
CLICK ME
</span>
</p>

If you use document.getElementById, you need specify the "id":
Example:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
Example by: http://www.w3schools.com/jsref/event_onclick.asp

There is no id specified on your element .
<p class="textAlignLeft" id="latestDiscountCode" onclick = "showCode();">
....
</p>
The id can be placed on whatever element you want to change the classname of. Code above is assuming this is the "p" tag.
Hope this helps.

I suspect you have a typo in either your id name or your stylesheet class names. The code you supplied does not include an element with an of "latestDiscountCode" so I have created one as an example. If you click on the CLICK ME text you will see your browers DOM inspector that the correct classes are added to the div.
<html>
<head>
<link href="stylizing.css" rel="stylesheet">
<script>
function showCode()
{
document.getElementById("latestDiscountCode").className ="unhideBlock textAlignLeft";
}
</script>
</head>
<body>
<p class="textAlignLeft" onclick = "showCode();">
<span class="xxx">
CLICK ME
</span>
</p>
<p id="latestDiscountCode">
foo
</p>
</body>
</html>

I don't think you need that semi-colon ;
<p class="textAlignLeft" onclick = "showCode()">

Move the <script> to the end of the body. Otherwise, it'll execute before the DOM's been loaded. Credits to #Federico.
Alternatively, listen for DOMContentLoaded.

Related

Having trouble with a beginner dom manipulation exercise while using addEventListener

<html>
<head>
<title>Dom Manipulation intro</title>
<!-- <link rel="stylesheet" href="domManStyle.css"> -->
</head>
<body>
<button id="press">Click me</button>
<p>No one has clicked me</p>
<script type="text/javascript" src="DomManip.js"></script>
</body>
</html>
//JS
var button = document.getElementById("#press");
var paragraph = document.querySelector("p");
button.addEventListener("press", onClick);
function onClick(){
paragraph.textContent="Someone Clicked me.";
}
This is the first Dom Manipulation exercise I am trying and keep getting an error: Cannot read property addEventListener of null. I have also tried to set up the JS .addEventListener like:
button.addEventListener("press" , function(){
paragraph.textContent="Someone Clicked me.";
});
but still get the same error.
First, you have a typo in your getElementById method. You have to call it without # as it is already an id and so the id-identifier is not needed:
var button = document.getElementById("press");
Second, there is no press event, you want to listen to a click:
button.addEventListener("click", onClick);

Why does this code not work? Javascript and HTML. Please see the details

This is my HTML file.
<body>
<header>
<h3 id = "TestID"> Test </h3>
</header>
</body>
<script src = "MessagingPage.js"></script>
This is my JS file
document.getElementById("TestID").addEventListener("load", function(){
this.innerHTML("Hi");
})
document.write("Hello World");
Now, when I load the HTML, I get "Test" in the browser. However, what needs to be there is "Hi". I do not understand why this happens. Can you please help me understand? I am just getting started, so please explain in simple terms.
Thanks for taking the time to read through this :)
You have two problems.
Only elements which load external content have a load event (such as an iframe or img).
The h3 isn't loading any external content so has no load event.
Perhaps you should bind your event handler to the window.
innerHTML is a string, not a function.
addEventListener("load", function() {
document.getElementById("TestID").innerHTML = "Hi";
})
document.write("Hello World");
<header>
<h3 id="TestID"> Test </h3>
</header>
<script src="MessagingPage.js"></script>
Including the script inside <body> and updating the JS file will resolve the problem.
Here is the example of working code:
Updated HTML:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<header>
<h3 id = "TestID"> Test </h3>
</header>
<script src = "/MessagingPage.js"></script>
</body>
</html>
Updated JS:
// MessagingPage.js
document.getElementById("TestID").innerHTML = "Hi"
document.write("Hello World");
Output:

JQuery click event on all buttons with id starting with custom text

Using JQuery, I need to write a function, called on click for any of the two buttons (edit0, edit1).
I have the following code:
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$('[id^=edit]').click(function() {
alert("1111");
});
</script>
</head>
<body>
<button id="edit0" class="edit"> edit </button>
<button id="edit1" class="edit"> edit </button>
</body>
</html>
When I run it, nothing happens on button click.
I tried to replace the script with:
$('button[class="edit"]').click(function() {
alert('1111');
});
But the result is the same.
You can simply use CSS3 [attribute^=value] Selector to implement 'click event on all buttons with id starting with custom text' as you wish, like below.
$('button[id^="edit"]').click(function() {
alert('111');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button id="edit0" class="edit"> edit </button>
<button id="edit1" class="edit"> edit </button>
<script type="text/javascript">
$('[id^=edit]').click(function() {
alert("1111");
});
</script>
</body>
</html>
And also, put your code just before the closure </body> tag to ensure your dom is ready when the code runs.
I normally see that syntax for addressing custom attributes, try this.
$('button.edit').click(function() {
alert('1111');
});
Also put your script below your HTML. Or use a jQuery on document ready. Remember JavaScript/JQuery are executed sequentially.

Html tag with id attribute

I was wondering what html tag that suppport id attribute either than <p> tag because i want to change the tag by javascript but i dont want it to be appear in paragraph.
This all what ive been trying
<!DOCTYPE html>
<html>
<body>
Name : <p id="user">user1</p>
<script>
document.getElementById("user").innerHTML="Arvin";
</script>
</body>
</html>
but the result is
Name :
Arvin
what I want is
Name : Arvin
thanks for spending your time to read this..any help will much appreciated
Every tag supports id. In your case, <span> would work well.
document.getElementById("user").innerHTML="Arvin";
Name : <span id="user">user1</span>
This code goes wrong because paragraph are shown into a new line (by browser).
This code put text in two lines (without your Javascript)
<html>
<body>
Name : <p id="user">user1</p>
</body>
</html>
You maybe shoud better do this:
<html>
<body>
<p>Name : <span id="user">user1</span></p>
</body>
</html>
document.getElementById("user").innerHTML="Arvin";
See running example here:
I cannot think of any tag that wouldn't support the id attribute, neither can the HTML5 spec:
3.2.5 Global attributes
The following attributes are common to and may be specified on all
HTML elements (even those not defined in this specification): ... id
...
Try adding display: inline style in <p> tag and your problem is solved. You can use id calling on any tag though.
<!DOCTYPE html>
<html>
<body>
Name : <p id="user" style="display:inline;">user1</p>
<script>
document.getElementById("user").innerHTML="Arvin";
</script>
</body>
</html>

Pass div to javascript function and change its style

I'm trying to pass a div's id to a javascript function that does something simple, like change the background color of the div.
Weird thing is, my code works in the w3schools.com Tryit editor, but not in JSFiddle. It also doesn't work in my compiler (Coda 2).
Is this even the right way of going about this? Here's my code:
<!DOCTYPE html>
<html>
<head>
<script>
function changeBackgroundColor(asdf)
{
asdf.style.backgroundColor = "#fff000";
}
</script>
</head>
<body>
<div id="myDiv" style="background:red"> this is my div </div>
<button onclick="changeBackgroundColor(myDiv)"> Set background color </button>
</body>
</html>
and here's the JSFiddle stuff: http://jsfiddle.net/BH9Rs/
You need to use document.getElementById to get the element from the id
function changeBackgroundColor(asdf){
document.getElementById(asdf).style.backgroundColor = "#fff000";
}
and pass the id like this (in single quotes)
<button onclick="changeBackgroundColor('myDiv')">
And in your fiddle put your function inside the Head section.
(select no-wrap in Head) at left side Framework and Extension option
Js Fiddle Demo
Change the script placement combo to no wrap - in <head> (second combo box on the left panel)
myDiv is an unknown identifier.
Use document.getElementById() in order to refer to your div:
<button onclick="changeBackgroundColor(document.getElementById('myDiv'))"> Set background color </button>
In addition, you have to move your JS code in your HTML due to the jsFiddle environment: http://jsfiddle.net/BH9Rs/1/
<script>
function changeBackgroundColor(asdf) {
asdf.style.backgroundColor = "#fff000";
}
</script>
<div id="myDiv" style="background:red">this is my div</div>
<button onclick="changeBackgroundColor(document.getElementById('myDiv'))">Set background color</button>
Inline styles and inline click events? boo.
<div id="myDiv"> this is my div </div>
<button id="clickMe"> Set background color </button>
<script>
document.getElementById('clickMe').onclick = function(){
document.getElementById('myDiv').style.backgroundColor = '#fff000';
}
</script>
You mast do so:
<!DOCTYPE html>
<html>
<head>
<script>
function changeBackgroundColor(asdf)
{
document.getElementById(asdf).style.backgroundColor = "#fff000";
}
</script>
</head>
<body>
<div id="myDiv" style="background:red"> this is my div </div>
<button onclick="changeBackgroundColor('myDiv')"> Set background color </button>
</body>
</html>

Categories