html click button display/hide picture? [duplicate] - javascript

This question already has answers here:
Javascript show element on click
(3 answers)
Closed 9 years ago.
So, I am new to html and say I have 2 buttons named "Show Picture 1" and "Show Picture 2"
I want to be able to display Picture1 after clicking the button "Show Picture 1".
I also want to be able to display Picture2 where Picture1 was (and hide Picture1 if Picture1 was being displayed).
What is the code I should write to allow this to happen?
My code so far for displaying picture 1:
<style type="text/css">
.show{display:block;}
.hide{display:none;}
</style>
<script type="text/javascript">
function showImg()
{
var obj=document.getElementById('Picture1');
obj.className = 'show';
}
</script>
<center>
<img id="Picture1" src=Picture1.jpg" class="hide">
<input type="button" onclick = "showImg()" value= "Picture1">
</center>
Thanks

/// if ur looking to toggle image try this simple code////
<script type = "text/javascript">
function pic1()
{
document.getElementById("img").src = "picture 1 source";
}
function pic2()
{
document.getElementById("img").src ="picture 2 source";
} </script>
<img src = "" id = "img"/> <input type="button" value="Show Picture
1" onclick="pic1()"/> <input type="button" value="Show Picture 2"
onclick="pic2()"/>

Related

How to toggle a div after clicking javascript/html

I'm trying to use a div to show game rules, so when they select the "button" it will reveal the rules, but I can't get it to close by reselecting it. I have tried a few other solutions but they are not quite what I am looking for.
<script type="text/javascript">
function showDiv() {
document.getElementById('howto').style.display = "block";
}
</script>
<input type="button" name="rules" value="How to Play!" onclick="showDiv()" />
<div id="howto" style="display:none;" class="rules" > WELCOME</div>
You could have a toggleDiv rather than showDiv function that checks the display style and sets it to whichever of block or none it is not currently set to. For example:
<script type="text/javascript">
function toggleDiv() {
var div = document.getElementById('howto');
div.style.display = (div.style.display == "block") ? "none" : "block";
}
</script>
<input type="button" name="rules" value="How to Play!" onclick="toggleDiv()" />
<div id="howto" style="display:none;" class="rules" > WELCOME</div>

Javascript Image Link

I would like to have an image appear when a button is clicked. I think that I have gotten everything in the code right, but I need help with the image link.
I would like to take the image from a website. What is the code that I add to this code to make it do this?
<script type = "text/javascript">
function pic1()
{
document.getElementById("img").src =";
}
<img src = "" id = "img"/> <input type="button" value="Click for image!" onclick="pic1()"/>
Try this:
function pic1()
{
//set this to the url of whatever image you want to appear
var imageUrl = "https://www.google.com/images/srpr/logo11w.png";
document.getElementById("img").setAttribute("src",imageUrl);
}
<img src="" id="img"/>
<input type="button" value="Click for image!" onclick="pic1()"/>

can't change text color with jQuery while getting color from user

I have a code of jQuery and HTML. The code is suppose to enable the user to change text color when clicking and also choose the color that the text should be changed to.
However, I'm having a bit of trouble. When I write blue in the textarea, it always change the text color to black. The second problem is that when I click "Show me the color of the text" it shows color with rgb. Is there any way to make it show the color's name?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Change Color of Text</title>
<script src="jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
var TextColor = $("#text").css("color");
var ColorToChangeTo = $("#ColorToChange").text();
$("#GetColor").click(function () {
$("#ShowColor").text("The text color is " + TextColor);
});
$("#ChangeColor").click(function () {
$("#text").css("color", ColorToChangeTo);
});
});
</script>
</head>
<body dir="ltr" style="font-family: calibri;">
<center>
<div id="text" style="color: red;">
Hello, I am a text.
<br>Click the button below to see what is my color. If you want to change my color,
<br>enter the color that you want me to be displayed in and push the button "Change text color!"
</div>
<input type="button" id="GetColor" value="Show me the text's color!" />
<br>
<div id="ShowColor"></div>
<input type="text" id="ColorToChange" />
<br>
<input type="button" id="ChangeColor" value="Change text color!" />
</center>
</body>
</html>
This should solve your first issue:
<!DOCTYPE html>
<html>
<head>
<title>Change Color of Text</title>
<script>
$(document).ready(function () {
$("#GetColor").click(function () {
var TextColor = $("#text").css("color");
$("#ShowColor").text("The text color is " + TextColor);
});
$("#ChangeColor").click(function () {
var ColorToChangeTo = $("#ColorToChange").val();
$("#text").css("color", ColorToChangeTo);
});
});
</script>
</head>
<body dir="ltr" style="font-family: calibri;">
<center>
<div id="text" style="color: red;">
Hello, I am a text.
<br>Click the button below to see what is my color. If you want to change my color,
<br>enter the color that you want me to be displayed in and push the button "Change text color!"
</div>
<input type="button" id="GetColor" value="Show me the text's color!" />
<br>
<div id="ShowColor"></div>
<input type="text" id="ColorToChange" />
<br>
<input type="button" id="ChangeColor" value="Change text color!" />
</center>
</body>
</html>
In particular:
$("#ChangeColor").click(function () {
var ColorToChangeTo = $("#ColorToChange").val();
$("#text").css("color", ColorToChangeTo);
});
You have to get the color inserted by the user every time the button is clicked (if you run $("#ColorToChange").val(); only at the loading of the page, it will keep the value at that particular moment and won't refresh).
To get the content of an Input, use .val() instead of .text(). The first one reads the value of the input, the second is used for retrieving the text inside a tag (<span>This is text that would be retrieved by .text()</span>)
Regarding the second request:
Is there any way to make it show the color's name?
Returning name of colors using jQuery
You can do that with color_classifier.js plugin. It works good and returns the name of nearest color that has name.
This is a question may be answered previously in stackoverflow here or here

click on image and change a text

U have 2 images on a page and a textbox (php)
When u click on the image i want to change the text.
I am a starter, please sent a code that isn't to hard to understand.
<body>
<img src="bier1.jpg" alt="u mad" onclick= "">
<img src="bier2.jpg" alt="u mad" onclick= ""><br>
<form>
<input type="text" name="Example"/>
</form>
</body>
Are I'm right that you want to change the text of the Textbox? If yes here's the code:
<body>
<img src="bier1.jpg" alt="u mad" onclick= "document.forms[0].elements['Example'].value = 'Image 1'">
<img src="bier2.jpg" alt="u mad" onclick= "document.forms[0].elements['Example'].value = 'Image 2'"><br>
<form>
<input type="text" name="Example"/>
</form>
</body>
You'll need to use Javascript, I prefer to give javascript code using jQuery, so please do a quick Google search on jQuery.
<script type="text/javascript">
$(function(){
//You need to bind click events to your images and probably
$("img.has-message").click(function(){
var msg = $(this).attr("data-msg");
//get the message from that particular image
$("#text_box_id").attr("value",msg);
//changes the value of the text box to display the message
return false;
});
});
</script>
So you place this code in the <head></head> tag of your page
This code will work perfectly assuming you could change your HTML to look like so:
<body>
<img src="bier1.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked">
<img src="bier2.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked"><br>
<form>
<input type="text" id="text_box_id" name="Example"/>
</form>
</body>
Please remember that jQuery needs to have been included on your page for the above to work.
You need to first add id to the text field:
<input type="text" name="Example" id="myTextBox" />
Then you can do such thing:
<img src="bier1.jpg" alt="u mad" onclick="document.getElementById('myTextBox').value = this.alt;" />
<img src="bier2.jpg" alt="u mad" onclick="document.getElementById('myTextBox').value = this.alt;" />
This is not very elegant though, you have it applied to all images without having to change the markup, have such JavaScript:
window.onload = function() {
var oTextbox = document.getElementById('myTextBox');
for (var i = 0; i < document.images.length; i++) {
document.images[i].onclick = function() {
oTextbox.value = this.alt;
};
}
};
Live test case of above code.
You can also have the above code work only for certain images by applying a class to those images you want "clickable", for example:
<img src="bier1.jpg" alt="u mad" />
<img class="clickable" src="bier2.jpg" alt="u mad 2" />
To have only the second cause the textbox to change, have such code:
window.onload = function() {
var oTextbox = document.getElementById('myTextBox');
for (var i = 0; i < document.images.length; i++) {
var image = document.images[i];
if (image.className === "clickable" || image.className.indexOf("clickable ") >= 0 || image.className.indexOf(" clickable") >= 0) {
image.onclick = function() {
oTextbox.value = this.alt;
};
}
}
};​
Updated fiddle to demonstrate.
I am guessing they mean the page is served as a php page. I would do this purely in javascript. In pseudo code I would do the following.
Create function in javascript
Function looks up input using name
Function sets the text of the input to whatever you like (this could be based on which image was clicked
Id deffinately suggest looking at w3schools website which will give you lots of simple examples to get you started.
Also start basic and work your way up, if you cant get it all working at once, do it bit by bit, get your onclick to alert when you click it, then try setting the text once you knwo your onclicks are working.

Javascript function to change button colour

Can someone show me whats wrong with this:
<html>
<script type = "text/javascript">
function colourGreen()
{
document.getElementById("button1").style.bgColor = 0xFFFF00;
}
</script>
<body>
<form action="">
<div id = "button1">
<input type="button" value="Colour">
</div id>
<div id = "button2">
<input type="button" value="Price up" onclick = "colourGreen()">
</div id>
<div id = "button3">
<input type="button" value="Price down">
</div id>
</form>
</body>
</html>
document.getElementById("button1").style.backgroundColor = '#FFFF00';
Try:
document.getElementById("button1").style.backgroundColor = '#00ff00';
It is backgroundColor not bgColor
You can create a css rule and change the className of the button to link to that rule.
<style type="text/css">
.buttonColor{
background-color: green;
}
</style>
<script type ="text/javascript">
function colourGreen() {
document.getElementById("button1").className = "buttonColor";
}
</script>
That way if you for some reason decide to change the color or the background you will not have to change it on every page. You will be able to change that one css file.
I'd try
.style.backgroundColor = 0xFFFF00;
I assume your divs are only as big as your buttons and are therefore hidden by the buttons themselves. Change the colour on you button itself instead of the div?
A neater and more reliable way to to edit css of items is using jquery selectors. $("#button1").css("background-color","#ff0000");
Be sure to include the jquery .js file before trying this or you'll get an object expected error.

Categories