<p id="para1">Hi</p>
<button onclick="style()">Submit</button>
<script>
function style(){
var text= document.getElementById("para1").style.color="green";
}
</script>
I added html code using javascript. All the headings and divs are working fine except the Button. The Button is not added or may be not working for some reasons. Please check my code give some suggestions. When I used the same code as html it worked fine.
style has a special meaning in JavaScript, use some other name as the name of your function:
<p id="para1">Hi</p>
<button onclick="elementStyle()">Submit</button>
<script>
function elementStyle(){
document.getElementById("para1").style.color="green";
}
</script>
Another way is to add a class to the element, that should be styled. Then you are very flexible in styling it:
<p id="para1">Hi</p>
<button onclick="stylePara1()">Submit</button>
<style>
.green-text {
color: green
}
</style>
<script>
function stylePara1(){
document.querySelector('#para1').classList.add('green-text');
}
</script>
Or use inline syntax:
<p id="para1">Hi</p>
<button onclick="document.querySelector('#para1').classList.add('green-text')">Submit</button>
<style>
.green-text {
color: green
}
</style>
Related
Over the recent days 've been trying to make buttons that changes a text's color by using
document.querySelector.('class name').style.color
in a function while using onclick to put that function in the button, but it always says my function *chanageColor isn't defined. Could some of you help me please? It also says theres an unexpected token, please help me with that as well!
<body>
<div class="box">
<h1> Hello</h1>
</div>
<script>
function changeColor(){
document.querySelector.('.box').style.color = 'pink';
}
</script>
<button class="pink">Pink</button>
</body>
</html>
Well, there's nothing in your code here that would even try to call your function so I can't say for sure what your issue is, but to hook up the click event of the button to your function, you use: .addEventListener().
Now, you do have a typo:
document.querySelector.('.box') // <-- The dot before ( is wrong
And your script element should be the last thing before you close the body tag so that by the time the script runs, all the HTML will have been parsed into memory.
<div class="box">
<h1> Hello</h1>
</div>
<button class="pink">Pink</button>
<script>
document.querySelector("button.pink").addEventListener("click", changeColor);
function changeColor(){
document.querySelector('.box').style.color = 'pink';
}
</script>
And while this works, inline styles should be avoided whenever possible because they are the hardest type of CSS styling to override and lead to duplication of code. Instead, use CSS classes whenever you can (almost always) as shown here:
.pinkText { color:pink; }
<div class="box">
<h1> Hello</h1>
</div>
<button class="pink">Pink</button>
<script>
// Get your DOM element references just once, not every time the function runs:
const box = document.querySelector('.box');
document.querySelector("button.pink").addEventListener("click", changeColor);
function changeColor(){
box.classList.add('pinkText');
}
</script>
<!DOCTYPE html>
<html>
<body>
<div class="box">
<h1> Hello</h1>
</div>
<button class="pink" onclick="changeColor()">Pink</button>
</body>
<script>
function changeColor(){
document.querySelector('.box h1').style.color = 'pink';
}
</script>
</html>
I am trying to apply smiley(emoji) to users comments on a page.
Example all the :) will be applied css attributes replaced with.
Is there a way I can use javascript or jquery to achieve this?
$(":)").css("background-image", "url('smile.gif')");
My Problem is the selector part, Since I dont want to apply the css to the whole div.
you need to wrp you html text ':)' with some html and then you can add css/jq to it. See below javascript code and try to add you css to "smiley" class
document.body.innerHTML = document.body.innerHTML.replace(':)', '');
Below is a possibility. I'm assuming at least that you can discern the comments section from the rest of the webpage.
$("#commentsSection").find(":contains(':)')").each(function() {
$(this).html($(this).html().replace(
':)',
'<span style="background-image: url(\'smile.gif\')" />'
));
});
Since you mentioned that you can't process the comments before submitting to the database, you could hook this code to the $(document).ready() event.
$(document).ready(function() {
$("#btn").click(function() {
$("#commentsSection").find(":contains(':)')").each(function() {
$(this).html($(this).html().replace(
':)',
'<span style="background-image: url(\'smile.gif\')" />'
));
});
});
});
/* Just for visual feedback in the snippet */
#commentsSection span {
display: inline-block;
width: 10px;
height: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someText">
Don't replace this! :)
</div>
<div id="commentsSection">
<h2>
Comments:
</h2>
<div>
Hello! :)
</div>
<div>
Hi!
</div>
<div>
Hello again! :)
</div>
</div>
<button id="btn">
Replace emojis
</button>
Simple example:
<input type="text" id="text"/>
<div id="smiley"></div>
<script>
$(function() {
var text=$('#text').val();
if(text ==":)") {
$("#smiley").append("<img src="smile.gif"/>);
}
})
</script>
I can't seem to get this to work at: https://jsfiddle.net/xc6htkn4/4/
<body>
<p id="one">One</p>
<p id="two">Two</p>
<p id="three">Three</p>
<p id="four">Four</p>
<p>
<button onclick="changeId()">Try it</button>
</p>
</body>
#one {
color: red;
}
#two {
color: blue;
}
function changeId() {
var el = document.getElementById('one');
el.id = 'two';
}
What is wrong with the code? It appears to be correct. I am simply trying to change the id on a click event.
Thanks!
Edit: My settings were not appropriately set in jsfiddle
You code is fine, you just need to change the way jsfiddle loads the js code.
Click on "javascript" button and select "Load Type" to be "No wrap - in <body>"
Working example: https://jsfiddle.net/xc6htkn4/5/
I am trying to learn Javascript on my own. So I gave myself a task: Create a button and with that button I can change the background colour. This is what I have done so far. I assume I don't need to run it under localhost like how we usually do PHP? I only drag the file to Google Chrome. So far, after clicking, it doesnt change colour at all. I also wonder why. Would be grateful if someone could point out my error
exe1.html
<html>
<head>
<link rel="stylesheet" href="layout.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.button').click(function(){
$('body').css('background', '#' + changeColour());
});
});
function changeColour() {
return Math.floor(Math.random()*16777215).toString(16);
}
</script>
</head>
<body>
<div class="buttonClickMe">
<button type="button" onclick="changeColour">Click me</button>
</div>
</body>
layout.css
button
{
background-color: red;
width: 100px;
height: 100px;
}
body
{
text-align: center;
background-color: blue;
}
Looks like you are trying to implement the click event in two ways:
as a HTML attribute
<button type="button" onclick="changeColour">
In order for this way to work, you should use changeColour as a function:
<button type="button" onclick="changeColour()">
via JS
$('.button').click(function(){ ...
This is the wrong selector for button (the . looks for elements by class name). Instead, use button:
$('button').click(function(){ ...
Either method will work and you only need one.
This should work
$(document).ready(function () {
$('.button').click(function () {
changeColour();
});
});
function changeColour() {
var col = Math.floor(Math.random() * 16777215).toString(16);
$('body').css('background', '#' + col);
}
If you are learning javascript don't jump so fast to jQuery, first do it in plain javascript, like this.
Pure JS
var array = ['black','red','yellow']; //create an array with colors
function changes(){ //create the function
document.bgColor= array[Math.floor(Math.random()* array.length)]; //change the document. for example
}
HTML
<button type="button" onclick="change()">Click me</button>
The selector you're using for the click event does not exist. Add a class to the button for it t work.
Try this:
HTML
<button type="button" class="button">Click me</button>
CSS
$(document).ready(function(){
$('.button').on('click', function(){
$('body').css('background', '#' + changeColour());
});
});
function changeColour() {
return Math.floor(Math.random()*16777215).toString(16);
}
What you've done is fine,
You should move the button class .button onto the actual button element and remove the onclick and then should work.
Here:
http://jsfiddle.net/745ex5zc/
$('.button').click(function(){...
is referring to a click on a button with the CLASS button.
Simply add class=""button" to your button and it would work, though I'd recommend using id="myId" and using $('#myId').click(function(){ instead.
Give this a try...
JSFiddle https://jsfiddle.net/w6tjtaqy/
<script>
$(document).ready(function(){
$('.button').click(function(){
$('body').css('background', '#' + changeColour());
});
});
function changeColour() {
return Math.floor(Math.random()*16777215).toString(16);
}
</script>
<style>
button
{
background-color: red;
width: 100px;
height: 100px;
}
body
{
text-align: center;
background-color: blue;
}
</style>
<div class="buttonClickMe">
<button type="button" class="button">Click me</button>
</div>
The example below works. (Example taken from w3cschools, and hacked a bit.)
Clicking anywhere in the DIV will cause the address class div to disappear.
However, changing the third line of the script to read
$("button").click(function(){
instead of "div" and it just sits there like a paperweight. What am I missing.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div").click(function(){
$(this).children(".address").toggle("slow");
});
});
</script>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>Island Trading</h3>
<div class=ex>
<button>Hide me</button>
<div class=address>
<p>Contact: Helen Bennett<br>
Garden House Crowther Way<br>
London</p>
</div>
</div>
<h3>Paris spécialités</h3>
<div class=ex>
<button class="hide">Hide me</button>
<div class=address>
<p>Contact: Marie Bertrand<br>
265, Boulevard Charonne<br>
Paris</p>
</div>
</div>
</body>
</html>
Change
$(this).children(".address").toggle("slow");
To something like:
$('.address').toggle("slow");
OR
$(this).siblings(".address").toggle("slow");
Once you make the listener act on the button element, .address is not a child of button any longer. It's a sibling. If there will be multiple .address classes on your page, you must use siblings.
http://jsfiddle.net/9S722/1/
Try this:
$("button").on("click", function(){
$(this).parent().children(".address").toggle("slow");
});
http://jsfiddle.net/hescano/9S722/
$(this).parent().children(".address").toggle("slow");
The button doesn't have children
$("div").click(function(){
$(this).children(".address").toggle("slow");
});
The meaning of such code above is that, when click trigger in div container, it will go through its children for matching "address" class attribute.
However, if you just change $("div") to $("button"), but no child appears within button element. nothing matches for toggle function, just ignore it.
You should change code to as below:
$("button").click(function () {
$(this).next(".address").toggle("slow");
});
which find next sibling to button element. That is the element you want.