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/
Related
<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>
could someone please write me some javaScript to show how I can mouse over an "a href" element to display a "p" element paragraph on the page.
I have the paragraph displayed:none with css; I want to associate the mouse over of a link to display the paragraph.
cheers
You dont need to use JS for this. You can do this using css also.
<a href="#link" class="hoverOn">
<p class="hoverContent">This is hover content</p>
</a>
<style>
p.hoverContent{
display:none;
}
a.hoverOn:hover p.hoverContent{
display:block !important;
}
</style>
You can use the jQuery .hover() method.
HTML
Link Hover
<p id="para">Hidden text goes here</p>
JS
$("#mousehoverhere").hover(
function() {
/* Effect during hover */
$("#para").slideDown(500);
}, function() {
/* Effect after un-hover */
$("#para").slideUp(500);
}
);
CSS
#para {
display: none;
}
Check the JSFiddle demo
I'm assuming you are not using jQuery, so you can use this piece of code to show the element when you hover the link.
document.getElementById("link").addEventListener("mouseover", function(){
document.getElementById("paragraph").style.display = "block";
});
You need to replace link and paragraph with the ID of your link and paragraph.
To also hide the paragraph again when your mouse leaves the link, add this code too:
document.getElementById("link").addEventListener("mouseout", function(){
document.getElementById("paragraph").style.display = "none";
});
I have made an example for you:
$(document).ready(function () {
var link = $('#myLink');
link.on('mouseover', function () {
$('.lorem').show();
})
})
.lorem {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
my link
<p class="lorem">
lorem ipsum
</p>
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 am looking for javascript command that would do the following:
Click on image -> open spoiler
Click on image again -> hide spoiler
Here is what I got so far:
javascript in my html
<script>
function myFunction() {
document.getElementById("prvy").innerHTML = document.getElementById('spoiler_id').style.display='';}
</script>
Spoiler
<a id="show_id"
onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';"
class="link"></a><span id="spoiler_id"
style="display: none">[Show]<button onclick="document.getElementById('spoiler_id').style.display='none';
document.getElementById('show_id').style.display='';"
class="link">[Hide]</button>
<br><h1 id="bz">Heading</h1><br><br><p>text</p></span>
And my button:
<div id="prvy" onclick="myFunction()"></div>
What I managed to do, is to click on a image, wich will open spoiler. Hovewer, I've been unable to do the second part, onclick again it will close the spoiler.
I also did serach for solution alredy, nothing worked for me, not even this: Link
I also tired if{} else{} statement but didn't work for me either.
Help would be really appreciated, as I am getting desperate on this one.
You can use jQuery .toggle() to toggle show/hide
$("#prvy").click(function() {
$("#spoiler_id").toggle();
});
Note : You need to include jQuery in your document as
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Working snippet :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="show_id"
onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';"
class="link"></a><span id="spoiler_id"
style="display: none">[Show]<button onclick="document.getElementById('spoiler_id').style.display='none';
document.getElementById('show_id').style.display='';"
class="link">[Hide]</button>
<br><h1 id="bz">Heading</h1><br><br><p>text</p></span>
<div id="prvy" onclick="myFunction()">button</div>
<script>
$("#prvy").click(function() {
$("#spoiler_id").toggle();
});
</script>
In the JavaScript where you click the button use the simple jQuery function toggle.
$('#spoiler_id').toggle();
Toggle will hide the element selected if it is currently shown or display the element if it is currently hidden.
you would need some state that flips when the function is called.
like this.
<script>
var state = false;
function myFunction() {
state = !state;
if(state){
//do something
}else{
//do something else
}
}
</script>
Is that all of your code, it would be easier for you and less confusing too if you just gave the buttons an on click function and then called that function in your js.
Can I see all of your html
I am giving an example to concerned question using javascript.
HTML:
<script type="text/javascript">
var permit = 'true';
function showhide() {
var getcont = document.getElementsByClassName('hidshowcont');
if (permit === 'true') {
permit = 'false';
getcont[0].style.display = 'block';
}
else {
permit = 'true';
getcont[0].style.display = 'none';
}
}
</script>
<style type="text/css">
.hidshowcont{
height: 200px;
width: 300px;
border: 1px solid #333333;
display: none;
}
</style>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1cSDTn18ufwjuMihttTvCPJOnFY-4hxbPcaOVd87nSPaQakbP9IERaQ" />
<br />
<br />
<div class="hidshowcont">
This is an example of hide and show the container by clicking of an image.
</div>
This will help u much
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>