We Keep Coding

I want to display my element when clicking, but my code isnt working

I want to change the value of display to "block" when I click, I did the code but it isn't working.
I'm sorry if you find that stupid, but I can't see the mistake, please help me
HTML:
<img src="../icons/bell.svg" class="event-icon" id="navbell">
<div class="drop-menu" id="belldrop"> //display: none;
<script src ="common-comands.js">
displayOnClick("navbell", "belldrop");
</script>
JS:
function displayOnClick(clickingObjId, displayObj) {
document.getElementById(clickingObjId).onclick = function(displayObj) {
document.getElementById(displayObj).style.display = 'block';
}
};

In your onclick function the argument displayObj is actually the event argument and you are overriding you displayObj id from your function displayOnClick.

Click on link to change the src of an image without jQuery

I want to click on a link to change the source of an image. Here's what I have come up with so far :
HTML :
click
<div id = "bulb">
<center><img src = "C:\Users\hp\Desktop\on.gif" style = "width:180px;height:270px;position:relative;top:25px;border:2px solid black;"></center>
</div>
JS :
function changesrc() {
var work = document.getElementById('bulb');
if (work.src.match(C:\Users\hp\Desktop\on)) {
work.src = "C:\Users\hp\Desktop\off.gif";
}
else {
work.src = "C:\Users\hp\Desktop\on.gif";
}
}
I am a beginner in javascript, so please help me. According to me, on clicking the a (with text click) the function change src gets executed.that func. has a variable work. the work calls the element by id = bulb. If that variable's(work's) src matches that of the image on my desktop(with the bulb on
) then it gets changed to off else it changes to on(as if it isn't on that means it's off and so we change that).
I took help from w3schools. I looked up similar questions. I even changed work.src to bulb.src . Still cant find my mistake. Please help and tell me what's causing this!!! No jQuery please as I don't know it yet.

document.getElementById('bulb') is not an image. In your code you are changing the "src" of the <div>.
Change the id to the image, like:
click
<div style="text-align:center;"">
<img id="bulb" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-logo-med.png?v=d9b0b6647f17" style="width:180px;height:270px;position:relative;top:25px;border:2px solid black;">
</div>
And Javascript:
function changesrc(){
var work = document.getElementById('bulb');
if(work.src.indexOf('se/se-')){
work.src = 'http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo-med.png?v=6f86a5fa447f';
}
else{
work.src = 'http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-logo-med.png?v=d9b0b6647f17';
}
}
Update:
"return" corrected: onclick="changesrc(); return false;".

if (work.src.match(C:\Users\hp\Desktop\on)) {
This should be matching a string?
if (work.src.match('C:\Users\hp\Desktop\on')) {

You're using the match function which expects a RegExp as a parameter. Actually I think that in your case you could just compare the strings:
if (work.src === 'C:\Users\hp\Desktop\on') {

How to change an img src with javascript?

I know there are other questions like this and I've tried following them I'm just not aware of what exactly I'm doing wrong. I've declared the pic variable as being linked to the image with the corresponding id of 'pic' and I've tried many different examples and trying to follow other questions like this but to no avail.
--- THE REAL QUESTION ----
I would like the image to change its src to another one that I have in my workspace with the click of a button.
HTML:
<img class="trans" id="pic" src="images/link_rouge.png" alt="" width="1000" height="333" />
JavaScript:
var pic = document.getElementById('pic');
function rouge() {
pic.src = "images/link_rouge.png";
}
function blue() {
pic.src = "images/link_blue.png";
}
I know the functions already work with the buttons because they are affecting some divs on the page that change color the only things not changing are the images.

The EventTarget.addEventListener() method registers the specified listener on the EventTarget it's called on.
Use addEventListener over button elements to attach click events and bind your handler functions to those events.
var pic = document.getElementById('pic');
function rouge() {
pic.src = "http://www.projectvictorycosplay.com/images/zelda/Links/3198_render_link.png";
}
function blue() {
pic.src = "http://bin.smwcentral.net/u/1944/Link%2BBlue%2BTP%2Bshrunk.png";
}
document.getElementById('btn1').addEventListener('click', rouge);
document.getElementById('btn2').addEventListener('click', blue);
img {
width: 200px;
}
<button id='btn1'>rouge</button>
<button id='btn2'>blue</button>
<br/>
<img class="trans" id="pic" src="http://www.projectvictorycosplay.com/images/zelda/Links/3198_render_link.png" alt="" width="1000" height="333" />

There's a chance your page has not loaded before pic is set equal to document.getElementById('pic');.
You can use something like jQuery's $(document).ready() function (or document.addEventListener("DOMContentLoaded", handler);) to ensure your page is fully loaded before assigning the pic variable.
$( document ).ready(function() {
var pic = document.getElementById('pic');
function rouge() {
pic.src = "images/link_rouge.png";
}
function blue() {
pic.src = "images/link_blue.png";
}
});
Note: You will need to pull the JQuery library into your project to use this method. See here.
Also, you can read this post to learn a little more about HTML/JavaScript and page loading.

Assigning element attribute to an other element's innerhtml. Javascript/HTML

I'm working on a website, and the pictures page I'm trying to create has 1 big picture, with smaller thumbnails underneath. I have a javascript function in the head:
function loadThumbnail(divID){
document.getElementById("mainPicture").src = document.getElementById(divID).src;
document.getElementById("mainPicture").alt = document.getElementById(divId).alt;
document.getElementById("caption").innerHTML = document.getElementById(divId).alt;
}
The parameter divID is a misleading title, it's actually the ID of the img element that holds the thumbnail. The function is called whenever the user clicks a thumbnail. The .src bit works, but I can't get the function to change the caption to the picture. Any idea why?
Edit: Here's the HTML
<img id="mainPicture" src="images/food/chickenAndCheeseFries1.png" width="420" height="313" alt="Chicken Tenders and Cheese Fries">
<p id="caption">Chicken tenders and cheese fries</p>
<div onClick="loadThumbnail('t1')" id="thumbnail1" class="thumbnail">
<div id="thumbnailPic1" class="thumbnailPic">
<img id="t1" src="images/food/buffaloAndHotWings1.png" width="105" height="80" alt="Sweet Chilly and Buffalo Wings">
</div>
</div>

Make sure the divID variable is used consistently, including the case. It looks like you typoed and used "divId", which won't work. Try it like this, "divID", in all cases.
function loadThumbnail(divID) {
document.getElementById("mainPicture").src = document.getElementById(divID).src;
document.getElementById("mainPicture").alt = document.getElementById(divID).alt;
document.getElementById("caption").innerHTML = document.getElementById(divID).alt;
}
Case matters! divID != divId

Javascript change a picture when clicking

I wrote this function to change my pic what is the problem?
my aim is when clicking on a pic toggle between 2 images if image p is showing by clicking shows me image p1
I have this in script:
<script>
function changeimage()
{
if(this.getElementById('myimage').src=="../../images/p1.gif")
{
document.getElementById('myimage').src="../../images/p.gif";
}
else
{
document.getElementById('myimage').src="../../images/p1.gif";
}
}
</script>
in the html part I have these ones which are more than one picture but I set the whole of them with Id=myimage is it wrong to set the whole one same ID?:
<table width="100%">
<tr>
<td><img id='myimage' src="../../images/p1.gif" onclick="changeimage();setTable('table2');setTable('table2-2');check('table3');check('table3-3');check('table3-3-3');check('table4');check('table5');check('table6');check('table6-1');"></td>
<td style="font-weight: bold;font-size:13; font-family:arial,verdana;" width="25%">General Rule Options</td>
<td valign="bottom" width="100%">
I have many rows in my tables like this

The problem is the following line:
if(this.getElementById('myimage').src=="../../images/p1.gif")
In particular, it's the use of this. In your function this will refer to the window, and the window doesn't have a getElementById method. Use document like you have in the other cases:
if(document.getElementById('myimage').src=="../../images/p1.gif") {
//...
}
And it looks like it should work fine. Alternatively, you can pass in an a reference to the clicked element when you call the event handler, and reference that instead of using getElementById. For example:
onclick="changeimage(this);"

You call changeImage() from the <img> element, and then reference this inside the function. Since the function runs without context (it's not tacked onto an object), this would refer to the window object, which doesn't have getElementById.
In your HTML, change onclick="changeImage() to onclick="changeImage(this) and change your changeImage function to work with the argument passed instead:
function changeimage(img) {
if(img.src=="../../images/p1.gif")
img.src="../../images/p.gif";
else
img.src="../../images/p1.gif";
}

In the if statement it should be document.getElementById() not this.getElementById().
Though having said that, you can pass a reference to the clicked element in to your function:
<img onclick="changeImage(this);">
function changeImage(imgEl) {
if(imgEl.src=="../../images/p1.gif") {
imgEl.src="../../images/p.gif";
} else {
imgEl.src="../../images/p1.gif";
}
}
That way if all of your table rows are using the same two images they can all call the same function. Better than having the function hardcoded to a particular element's ID.

You need to call the function on click like this:
http://jsfiddle.net/4ca9m/
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<img id="special" src="http://nssdc.gsfc.nasa.gov/image/planetary/venus/gal_venus_37218.jpg" alt ="none">
<script>
$("img#special").click(function () {
if($(this).attr("src") == "http://nssdc.gsfc.nasa.gov/image/planetary/venus/gal_venus_37218.jpg")
{
$(this).attr("src", "http://gcaptain.com/wp-content/uploads/2011/04/image5.png");
}
else
{
$(this).attr("src", "http://nssdc.gsfc.nasa.gov/image/planetary/venus/gal_venus_37218.jpg");
}
});
</script>
</body>
</html>

It doesn't work because when you use a relative path like:
<img src="../../images/p1.gif" onclick="changeimage();" />
The browser may secretly turn it into an absolute path like:
<img src="http://example.com/somewhere/images/p1.gif" onclick="changeimage();" />
At least Internet Explorer 9 exposes this behavior. However, you shouldn't depend on this behavior.
There are at least two ways how you can solve this problem:
Use data- attributes. You add a custom attribute to your image tag:
<img src="../../images/p1.gif" data-image="p1" onclick="changeimage();" />
Then change your JavaScript function to this:
<script>
function changeimage()
{
if(this.getElementById('myimage').getAttribute("data-image") == "p1") {
document.getElementById('myimage').src="../../images/p.gif";
document.getElementById('myimage').setAttribute("data-image", "p");
} else {
document.getElementById('myimage').src="../../images/p1.gif";
document.getElementById('myimage').setAttribute("data-image", "p1");
}
}
</script>
Use a variable to accomplish the same thing as above.
<img src="../../images/p1.gif" onclick="changeimage();" />
And the JavaScript:
<script>
var image = "p1";
function changeimage()
{
if(image == "p1") {
document.getElementById('myimage').src="../../images/p.gif";
image = "p";
} else {
document.getElementById('myimage').src="../../images/p1.gif";
image = "p1";
}
}
</script>
I prefer the first method because it allows me to include all information about the image in the image itself and not in a variable declared several lines away.