Using Textbox Value to Change CSS on Button Click - javascript

I am trying to use the value from a user's textbox answer to change the CSS of an image. I want the image border width to change on a button click. This is what I have so far.
$('#submit').click(function () {
var bv = $('#border').val();
$('#pic').css('border-width', bv);
});
#submit is the button id, #border is the textbox id, and #pic is the image id.
All advice is appreciated.

Just try this
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#submit').click(function () {
var bv = $('#border').val();
$('#pic').css('border-style', 'solid');//You should use this line of code to get your requirement
$('#pic').css('border-width', bv);
});
});
</script>
<input type="text" id="border">
<input type="button" id="submit" value="submit">
<img src="http://wallruru.com/wp-content/uploads/2014/08/White-Background-56.jpg" id="pic"/>

Two corrections to your code
You have to initially provide other border parameters keeping border-width dynamic.
You have to concatenate "px" to your border-width variable
JavaScript
$('#submit').click(function () {
var bv = $('#border').val();
$('#pic').css('border-style', 'solid');
$('#pic').css('border-color', 'black');
$('#pic').css('border-width', bv+"px");
});
Here is a working fiddle

Maybe you are forgetting to add a border color and border style to your image so when you add the border width nothing is shown.
This is what I try (and what I think you are doing) and is working fine.
JS
$(function(){
$('#submit').click(function () {
var bv = $('#border').val();
$('#pic').css('border-width', bv);
});
});
CSS
#pic {
border: 0 black solid;
}
HTML
<input type="text" id="border" />
<button id="submit">Click</button>
<img src="" id="pic">
Check out this codepen.

There is nothing wrong with your code.
You might want to check or add a border style to the image.
You might be adding a border-width without having a border.
I tried this code and it worked perfectly after I added a border of
.imageName{
border:1px solid black;
}
$('#submit').click(function () {
var bv = $('#border').val();
$('#pic').css('border-width', bv);
// you can also try this to make it smoother
$('#pic').animate({'border-width': bv + 'px'});
});

Related

Same image shown multiple times. Change only one at a time using JQuery

I have an image of a gray star or blue star shown multiple times on the page. When I click on the gray star, it should change to blue. And when I click on the blue star, it should change to gray. Right now, when I click on one star, it changes all of them. How do I only change one image at a time?
This is in my root.html.erb
<img class="star-pic" src="/assets/star-gray.png">
This is in my javascript/application.js
$(document).ready(function(){
function changeStar(){
if($(".star-pic").attr("src") == "/assets/star-gray.png"){
$(".star-pic").attr("src", "/assets/star-blue.png")
}
else{
$(".star-pic").attr("src", "/assets/star-gray.png")
}
}
$(".star-pic").on("click", changeStar)
})
Any advice would be greatly appreciated. Thank you.
Inside your function changeStar() you are selecting all the images when any image is clicked and changing all of them as a result. Using $(this) selects the element that was clicked and changes it only.
$(document).ready(function() {
function changeStar() {
if ($(this).attr("src") == "/assets/star-gray.png") {
$(this).attr("src", "/assets/star-blue.png")
} else {
$(this).attr("src", "/assets/star-gray.png")
}
}
$(".star-pic").on("click", changeStar)
})
You are setting up your click event such that all .star-pic elements have their style modified when any are clicked because of this:
$(".star-pic").attr("src", "/assets/star-blue.png")
This changes the src attribute for all members of the JQuery wrapped set.
You only want to modify the one that was clicked so you should be writing:
$(this).attr("src", "/assets/star-blue.png")
to only affect the one that was clicked.
But, beyond that, your code can be dramatically reduced and the solution hugely simplified if you get rid of the img elements completely and just use div (or span) elements that have their background-image set via membership in a CSS class. Then, all you have to do it toggle that class membership.
$(function(){
function changeStar(){
// Use $(this) to get a reference to just the element being clicked as a JQuery object
// Simply toggle the use of the greyStar class to toggle the image shown
$(this).toggleClass("greyStar");
}
$(".star-pic").on("click", changeStar)
});
.star-pic {
width:50px;
height:50px;
background-size:cover;
/* All elements default to showing a blue star */
background-image:url("https://upload.wikimedia.org/wikipedia/commons/9/98/Human-emblem-star-blue-128.png");
display:inline-block;
}
/* But some elements are coded in the HTML to override blue and show grey from the start */
.greyStar {
background-image:url("http://www.dyson.com/airtreatment/humidifiers/am10/am10-white-silver/medialibrary/Reviews/Grey-star.ashx");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="star-pic greyStar"></span>
<span class="star-pic"></span>
<span class="star-pic greyStar"></span>
<span class="star-pic"></span>
<span class="star-pic greyStar"></span>
<span class="star-pic"></span>
You should could assign a click function at the star and change the corresponding star using 'this'
$(".star-pic").click(function (){
if($(this).attr("src") === "/assets/star-gray.png"){
$(this).attr("src", "/assets/star-blue.png")
}else{
$(this).attr("src", "/assets/star-gray.png")
}
}
You can use the following code.
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
</head>
<body>
<img class="star-pic" src="/assets/star-gray.png">
<img class="star-pic" src="/assets/star-gray.png">
<img class="star-pic" src="/assets/star-gray.png">
<script>
$(document).ready(function(){
var clickedShape = $(this);
function changeStar(){
if($(this).attr("src") == "/assets/star-gray.png"){
$(this).attr("src", "/assets/star-blue.png")
}
else{
$(this).attr("src", "/assets/star-gray.png")
}
}
$(".star-pic").on("click", changeStar)
})
</script>
</body>
</html>

javascript - one image,two actions

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

Javascript Background Change Colour

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>

How do I move an HTML div using JavaScript?

I want my div containing text to move 10px to the right everytime upon click.
Here is the HTML:
<div id='color-div' style='clear:both; position:relative; left:0;'> </div>
And the script:
document.getElementById('color-div').style.right='10px';
My event is already defined and everything else is working as it should.
To move the div to the right, you should add to left, not right
You need to add a clickhandler to your div.
You are setting the style to a fixed value, to increasing it.
Add
onclick="moveRight()"
to your div, and change your javascript to this:
var moveRight = function(){
var current_offset = parseInt(document.getElementById('color-div').style.left);
document.getElementById('color-div').style.left = current_offset + 10 + "px";
}
Check it out here: jsFiddle
you might like to use this little javascript
<script language="javascript">
function example_animate(px) {
$('#example').animate({
'marginLeft' : px
});
}
</script>
<input type="button" value="Move Right" onclick="example_animate('+=50px')" />
and instead of moving it on button click, call this function on div click event.
Using jquery you can achieve this with : Example
HTML :
<div class="click-me"></div>
CSS :
.click-me {
display:block;
height:50px;
width:50px;
background:blue;
position:absolute;
}
Javascript :
$(document).ready(function() {
$('.click-me').click(function() {
$this = $(this);
var currentLeft = $this.offset().left;
$this.css("left", currentLeft + 10);
});
});

Javascript change width of image onclick

I'm a complete noob when it comes to javascript. Would there be anyway to change an image after it is clicked, some way to trigger a js function to change the css. It would have to be triggered by an event and something other than onclick, onfocus probably.
<style>
#pic {
width:100px;
height:100px;
}
</style>
</head>
<body>
<img src='nope.jpg' id='pic' onclick="mouseOver()"></img>
<script type='text/javascript'>
function mouseOver() {
document.getElementById('pic').style.width="400px";
document.getElementById('pic').style.height="400px";
}
</script>
try this...
function mouseOver() {
document.getElementById('image').style.height = "400px";
}
First i edited the question , because the function was not defined correctly .
Second :
to access the height property of any element , you should use style.height , and should add "px" to the value.
please spend more time searching for answers , instead of posting a new question.
Change the JS to this:
var image = document.getElementById('image');
function mouseOver() {
image.style.height="600px";
}
image.onclick = mouseOver;
Setting values you can use directly style attribute, but remember that asking for them is a greater problem:
Please refer to this one:
Get a CSS value with JavaScript
This should work
<style>
#pic {
width:100px;
height:100px;
}
</style>
</head>
<body>
<img
width="100"
onmouseOver="this.width=400; this.height=400"
onclick="this.width=100"
alt="RESIZE IMAGE"
id='pic'
src='nope.jpg'
/>
just copy and edit the image tag code as needed

Categories