I'm trying to make a simple HTML file with a checkbox and a javascript that change the color of the checkbox when clicked. The problem is that the javascript file is not called, so clicking the button is useless as the javascript code is not being read. It seens very simple but I can't see what am I doing wrong:
HTML code:
<!DOCTYPE html>
<html>
<head>
<script src="and_gate.js" defer></script>
</head>
<body style= "background-color: white;">
<label id=in1 class="container1" onclick="in1(element1)">0
<input type="checkbox">
</label>
<style>
.container1 {
background-color:green;
font-size: 2vw;
}
</style>
</body>
</html>
Javascript code:
alert('clicked')
funtion in1(element1){
element1.style="background-color:red;"
}
In an inline event handler, you can use this to refer to the target of the event.
You also misspelled function. And the alert needs to be inside the function.
function in1_fun(element1) {
alert('clicked')
element1.style = "background-color:red;"
}
.container1 {
background-color: green;
font-size: 2vw;
}
<label id=in1 class="container1" onclick="in1_fun(this)">0
<input type="checkbox">
</label>
It's also not a good idea to use the same name for your function as the ID of the element. Both of these become global variables, and it's possible for the ID variable to replace the function variable.
In JavaScript and HTML, when you pass a JS function to the onclick property of an element, the function doesn't know about the element that's calling it. You need to pass it some way to find that element, like an id (or the outer context through this, which I missed, and as Barmar points out in his excellent answer).
You can then use this ID with a function like document.getElementById() to find the desired element in the DOM, and do something with it, in this case change it's style property.
You also misspelled function as "funtion", which will cause it not to be processed as a function.
function in1(id) {
document.getElementById(id).style = "background-color:red;"
}
<!DOCTYPE html>
<html>
<head>
<script src="and_gate.js" defer></script>
</head>
<body style="background-color: white;">
<label id=in1 class="container1" onclick="in1('in1')">0
<input type="checkbox">
</label>
<style>
.container1 {
background-color: green;
font-size: 2vw;
}
</style>
</body>
</html>
Related
This question already has answers here:
onclick calling hide-div function not working
(3 answers)
Closed 1 year ago.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="overdiv">
<style>
.cross{
cursor:Default;
}
</style>
<script>
function close(){
alert("why don't you work");
}
</script>
<div id="lowerDiv">
<a class="cross" onclick=close()>x</a>
</div>
</div>
</body>
</html>
I can not understand why the x's onclick doesnt work, even if i surround the x with a div...
Any way i can fix or any other way i should be doing this? I want to close a window by pressing the x, I know how to do that but i just cant get the onclick to work... any help is appreciated.
https://stackoverflow.com/users/479156/ivar
Ivar let me know that the problem was naming the function "close()",
so i just had to name it a little different.
as explained here: onclick calling hide-div function not working
thank you Ivar!
<a class="cross" onclick=close()>x</a>
This code has a problem with onclick function. You didn't specified the function. You need the make the function code between "" tags.
Please change the code like this:
<a class="cross" onclick="close()">x</a>
I maid improvments to your code and it start to work
add "" to function in your tag onclick="onClose()",
you better add <script> in <header> but not in <body>
you can not called your function close() as it is reserved name. For example you also could not name var return etc
<!DOCTYPE html>
<html>
<head>
<script>
function onClose() {
console.log("why don't you work - I work");
}
</script>
<style>
.cross {
cursor: Default;
}
</style>
</head>
<body>
<div id="overdiv">
<div id="lowerDiv">
<a class="cross" onclick="onClose()">x</a>
</div>
</div>
</body>
</html>
I have created a simple addition program using HTML, CSS and Javascript.
HTML code is as follows:
<head>
<title>Input Output</title>
<link rel="stylesheet" type="text/css" href="io.css">
<body>
<h1>Sum App</h1>
<div class="container">
<script type="text/javascript" src="io.js"></script>
First Number <input type="text" id="numOne">
Second Number <input type="text" id="numTwo">
<button type="button" class="btn" onclick="submitBut()">Submit</button>
<p id="result"></p>
<div class="screen" id="screen1"></div>
</div >
The Javascript code is as follows:
function submitBut(){
var numOne= document.getElementById("numOne").value;
var numTwo= document.getElementById("numTwo").value;
var sum=parseInt(numOne)+parseInt(numTwo);
var element= document.createElement("p");
document.getElementById("result").innerHTML = sum;
}
I want to now style the result which as per the code seats in between paragraph tags with id "result".
What are the ways using which this is possible?
I tried using a standard style sheet format as below:
#result {
font-size: 45-px;
background-color= Yellow;
}
However, it is not working at all. Kindly let me know possible fixes.
Regards,
The problem is with the CSS you have written for this code. It's Invalid.
Change it like the following and it will work fine:
#result {
font-size: 45px;
background-color: yellow;
}
The thing is for js purpose I want a particular <style> tag to be removed from my document on an event. So for that, within my knowledge, I have added a class for it and removed on my event, eg:
<style class="custome_for_remove">
.selected_par>td,
.footer-tr>td {
position: relative;
display: table-cell!important
}.....
</style>
<script>
function customeRemove() {
$('.custome_for_remove').remove()
}
</script>
My concern is this HTML standard, is this a proper method.? I couldn't find any questions or answer related to this.
Yes! This totally works and it also seems to be valid syntax. Here's a little demonstration. According to https://validator.w3.org/ having a class in your style tag is considered valid html (you can also use an id if you want).
$("#test").click(() => {
$(".customClass").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style class="customClass">
p {
color: red;
}
</style>
<p>
Test
</p>
<button id="test">
remove
</button>
You can try the below code. It removes CSS perfectly.
function removeJs(){
$(".custome_for_remove").remove();
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<style class="custome_for_remove">
p {
color: red;
cursor: pointer;
}
</style>
<p onclick="removeJs()">
Click here!
</p>
If you click the button, it should have showed, but it doesn't.
Is any wrong here?
I have written many JavaScript files in this way, and tried many ways like changing the position of JavaScript code anywhere. But all the files I wrote don't work
Thanks in advance!
An instance :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Debug</title>
</head>
<style>
.debug {
display : none;
}
</style>
<body>
<div class = "debug">
<p>Welcome!</p>
</div>
<button class = "show" onclick = "JavaScript : show();">Show</button>
<script type = "text/JavaScript">
function show() {
document.querySelector("debug").style.display = "flex";
}
</script>
</body>
</html>
Thanks to all of you!
About .querySelector()
The Document method querySelector() returns the first Element within the document that matches the specified selector. [...] The selector is a CSS selector string.
- MDN web docs
You should, therefore, put in your code:
document.querySelector(".debug")
You can also select HTML elements by their tags, for example, you want to select the first div:
document.querySelector("div")
document.querySelector("div").style.color = "lightgreen"
<div>Hello World</div>
Imagine you had your own HTML tag: <hello>, then you can select all hello elements with:
document.querySelector("hello")
document.querySelector("hello").style.color = "lightblue"
<hello>Hello World</hello>
Side note on inline eventListeners
Also in HTML for inline event listener instead of:
<button class = "show" onclick = "JavaScript : show();">Show</button>
you can simply write:
<button class = "show" onclick = "show();">Show</button>
It is recommended to use JavaScript to initiate these eventListeners instead of having them inline inside your HTML markup. Use the .addEventListener() method:
document.querySelector(".show").addEventListener('click', show)
↑ ↑
event function
type
Back to your code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Debug</title>
</head>
<style>
.debug {
display : none;
}
</style>
<body>
<div class = "debug">
<p>Welcome!</p>
</div>
<button class ="show">Show</button>
<script type = "text/JavaScript">
document.querySelector(".show").addEventListener("click", show)
function show() {
document.querySelector(".debug").style.display = "flex";
}
</script>
</body>
</html>
Last thing
Also it's better to keep HTML, JavaScript and CSS all in separate files, for instance:
- index.html
- style.css
- script.js
And call the CSS and JavaScript files in your HTML file with the link (preferably inside <head>) and script (at the bottom of <body>) tags:
<link rel="stylesheet" type="text/css" href="style.css">
And
<script src="script.js"></script>
For class selector you need to add a dot (.) e.g. .debug
Also, in HTML, you can simply have onclick as onclick="show();"
function show() {
document.querySelector(".debug").style.display = "flex";
}
.debug {
display: none;
}
<div class="debug">
<p>Welcome!</p>
</div>
<button class="show" onclick="show();">Show</button>
You were not passing class to querySelector. Set ".debug" instead of "debug".
Below is working code:
function show() {
document.querySelector(".debug").style.display = "flex";
}
.debug {
display: none;
}
<div class="debug">
<p>Welcome!</p>
</div>
<button class="show" onclick="JavaScript : show();">Show</button>
queryselectors requires . and # for class and ID selector:
querySelector(".debug")
I have a simple page with three buttons. I wanted to make one function that changes the background color of my page on a click. So i somehow made it work.
I am basically wondering what exactly "this" does when i use it in my changecolor brackets?
I kind of have a feeling what it does but i need more objective knowledge.
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Panel</title>
<link rel="stylesheet" type="text/css" href="style.css"></link>
<script src="javascript.js"></script>
</head>
<body>
<h1>THIS IS SOME TEXT</h1>
<h2>This is some more text</h2>
<button class="buttons" id="button1" onclick="changecolor(this)">;P</button>
<button class="buttons" id="button2" onclick="changecolor(this)">;]</button>
<button class="buttons" id="button3" onclick="changecolor(this)">;)</button>
</body>
</html>
My css:
h1{
background-color: blue;
float: left;
}
h2{
color: blue;
float: left;
width:100%;
}
.buttons{
float:left;
margin-right: 10px;
width: 25px;
height: 25px;
}
#button1{
background-color:green;
}
#button2{
background-color:darkgray;
}
#button3{
background-color:blue;
}
My javascript:
function changecolor(clickedButton){
if(clickedButton.id == "button1"){
document.body.style.backgroundColor="lightgreen";
}
if(clickedButton.id =="button2"){
document.body.style.backgroundColor="gray";
}
if(clickedButton.id =="button3"){
document.body.style.backgroundColor="lightblue";
}
}
Thank you in advance!
In JavaScript this always refers to the “owner” of the function we're
executing, or rather, to the object that a function is a method of.
When we define our faithful function doSomething() in a page, its
owner is the page, or rather, the window object (or global object) of
JavaScript. An onclick property, though, is owned by the HTML element
it belongs to.
Via- http://www.quirksmode.org/js/this.html
this references the DOM element the event occurred on.
In this case, inside changecolor(), clickedButton will reference the <button> object that was clicked.
It sends a reference of the clicked element to the javascript function.
this refers to the button element itself.
this is changing your background color for the body of the document. "this" as in this button or object