I cannot get my javascript to run. I have added several different options, and removed them, I have had the function in the and now moved it to the . No matter what I try the button does not work. I am trying to learn javascript. It doesn't seem that difficult to learn, but If I can't test it, what is the use? Please help!
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8 />
<title>Change Paragraph Text</title>
</head>
<body>
<p id ="text">I’m going to change this text, I hope.</p>
<button type="button" onclick="js_style()">Click on Me</button>
<script>
function js_style() {
'use strict';
//font styles added by JS:
document.getElementById("text").style.color="purple";
document.getElementById("text").style.fontSize="18pt";
document.getElementById("text").style.fontFamily="Comic Sans MS";
}
document.getElementById("text").innerHTML = js_style();
</script>
</body>
</html>
The code you present throws undefined on the text you want to change. Simply remove
document.getElementById("text").innerHTML = js_style();
and everything should work, I suppose. Here is an example:
https://jsfiddle.net/nmLrpvhy/
The issue is that you have this line:
document.getElementById("text").innerHTML = js_style();
running automatically (because it's outside of your function) and changing the text immediately, so clicking the button does work, but it's just setting the same styles that were already set.
Additionally, innerHTML is for setting the "content" of an element, not its style. In your case, that line attempts to set the return value from the js_style function as the value for the innerHTML. But, the function doesn't return a value - - it only concerns itself with modifying styles.
Don't use inline HTML event attributes (onclick, etc.). See here for why. Instead, do all your work in JavaScript.
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8 />
<title>Change Paragraph Text</title>
</head>
<body>
<p id ="text">I’m going to change this text, I hope.</p>
<button type="button">Click on Me</button>
<script>
// get a reference to the button
var btn = document.querySelector("[type='button']");
// set up the click event handler
btn.addEventListener("click", js_style);
function js_style() {
//font styles added by JS:
document.getElementById("text").style.color="purple";
document.getElementById("text").style.fontSize="18pt";
document.getElementById("text").style.fontFamily="Comic Sans MS";
}
</script>
</body>
</html>
here is the solution of your code:
the line in which you were trying to get your changed text was actually outside the scope of the 'js_style' function that why nothing was happening when you clink on button.
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8 />
<title>Change Paragraph Text</title>
</head>
<body>
<p id="text">I’m going to change this text, I hope.</p>
<button type="button" onclick="js_style()">Click on Me</button>
<script>
function js_style() {
//font styles added by JS:
document.getElementById("text").style.color = "purple";
document.getElementById("text").style.fontSize = "18pt";
document.getElementById("text").style.fontFamily = "Comic Sans MS";
document.getElementById("text").innerHTML = "Changed Text"; /* this
line should be here if you want to change the text of #text in you
html */
}
/* you were written this line here which out of the scope of
function */
</script>
</body>
</html>
Can you try:
<script type="text/javascript">
instead of just
<script>
?
try with onclick="js_style">:
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8 />
<title>Change Paragraph Text</title>
</head>
<body>
<p id ="text">I’m going to change this text, I hope.</p>
<button type="button" onclick="js_style">Click on Me</button>
<script>
function js_style() {
'use strict';
//font styles added by JS:
document.getElementById("text").style.color="purple";
document.getElementById("text").style.fontSize="18pt";
document.getElementById("text").style.fontFamily="Comic Sans MS";
}
document.getElementById("text").innerHTML = js_style();
</script>
</body>
</html>
Related
Hello guys it's simple to fix who knows js. So I have code to change my style of height on first click but I want when user clicks next time to return the first style height.
So here is code
<!DOCTYPE html>
<html>
<body>
<button type="button" id="myBtn" onclick="myFunction()">test</button>
<script>
function myFunction() {<!-- w w w .ja v a 2s .c om-->
document.getElementById("myBtn").style.height = "50px";
}
</script>
</body>
</html>
And this works fine on one click but I want when I click next time to return me on first height
Can someone help me?
As noted in the comments, you should just create a css class and toggle it on-click.
<!DOCTYPE html>
<html>
<head>
<style>
.my-height { height: 50px; }
</style>
</head>
<body>
<button type="button" onclick="this.classList.toggle('my-height')">test</button>
</body>
</html>
I want to change the css properties of many html objects (but in this example I only took body to simplify. My goal is to display dark mode if the current mode is light, or display light mode if current mode is dark.
My javascript function does not work.
debug.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="debug.css">
<script src="darkmode.js"></script>
</head>
<body id="bodyElem" class="my-body light-mode">
<h1>Settings</h1>
<p>Dark mode:</p>
<button type="button" onclick="invertMode()">click</button>
</body>
</html>
debug.css:
.my-body.light-mode{
background-color: yellow;
}
.my-body.dark-mode{
background-color: black;
}
darkmode.js:
function invertMode() {
var body = document.getElementById("bodyElem");
var currentClass = body.className;
body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}
You will need to add an ID for the <body> tag to be able to find it using your code.
<body id="bodyElem" class="light-mode">
and access it using:
var body = document.getElementById("bodyElem");
If you need to access mutiple elements, you can use their CSS class name like:
document.getElementsByClassName("CLASSNAMEHERE");
then loop them all to apply the changes you need.
you will be using .classList.remove("CLASSNAME") to remove single class and .classList.add("CLASSNAME") to add single class to DOM element
Here is a complete sample fiddle:
https://jsfiddle.net/j3o8Lt5k/1/
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 the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function myEvent(){
if(document.getElementById('demo2').innerHTML=="Hide Me"){
document.getElementById('demo1').src='none';
document.getElementById('demo2').innerHTML='Display Me';
}
else {
document.getElementById('demo1').src="deepika.jpg";
document.getElementById('demo2').innerHTML="Hide Me";
changeCSS();
}
}
function changeCSS(){
document.getElementById('demo1').style.height="500";
document.getElementById('demo1').style.width="400";
}
</script>
</head>
<body>
<img src="deepika.jpg" id="demo1" height="500" width="400"><br>
<button type="button" id="demo2" onclick=myEvent()>Hide Me</button>
</body>
</html>
After clicking on Hide Me button I get this page:
Now I want to completely remove the picture block and bring Display Me button to top of the page. How can I do so?
I want to use plain JavaScript only and no JQuery
If I understand the question properly, you want to toggle the display of image upon button click. You can use the below updated myEvent function:
function myEvent(){
if(document.getElementById('demo2').innerHTML=="Hide Me"){
document.getElementById('demo1').src='none';
document.getElementById('demo1').style.display = "none";
document.getElementById('demo2').innerHTML='Display Me';
}
else {
document.getElementById('demo1').style.display = "";
document.getElementById('demo1').src="deepika.jpg";
document.getElementById('demo2').innerHTML="Hide Me";
changeCSS();
}
}
I would like to make a button that when it's clicked ,the background color of my webpage changes. I have tried already with Javascript & Css but no success! Here's my code:
<!DOCTYPE html>
<html>
<head>
<title>
Test
</title>
<style>
.bgcolor1{
background-color:black;
}
.bgcolor2{
background-color:grey;
}
</style>
<script type="text/javascript">
</script>
</head>
<body class="bgcolor1">
<button onclick="this.className = 'bgcolor2'">Change COLOUR</button>
</body>
</html>
As you can see when the user click on the button it should change the class to "bgcolor2" so the background color would be grey but it just changes the background color of the button to grey & not the document!
So how can I change the background color of document with css or js or what's the problem with this code? thx ...
<button onclick="document.body.className = 'bgcolor2'">Change COLOUR</button>
this refers to the button and not the body. document.body.className = 'bgcolor2';
use the document.body instead of this
<!DOCTYPE html>
<html>
<head>
<title>
Test
</title>
<style>
.bgcolor1{
background-color:black;
}
.bgcolor2{
background-color:grey;
}
</style>
<script type="text/javascript">
</script>
</head>
<body class="bgcolor1">
<button onclick="document.body.className = 'bgcolor2'">Change COLOUR</button>
</body>
</html>
Try something like this:
HTML
<button onclick="myFunction()">Click me</button>
Javascript
function myFunction(){
document.body.className = 'bgcolor';
}
CSS
.bgcolor{
background:red;
}
DEMO
Simply target document.body.className instead of this; in this scenario, this is a reference to the button itself. Make your onclick attribute as below
onclick="document.body.className='myCustomBGColor'"
where myCustomBGColor is a CSS class.
Here's your final working fiddle
.bgcolor1{
background-color:black;
}
.bgcolor2{
background-color:grey;
}
<body class="bgcolor1">
<button onclick="document.body.className = 'bgcolor2'">Change COLOUR</button>
</body>