We Keep Coding

Add number to end of div with jQuery

I'm using jQuery to create a simple addClass on hover. Hovering over a #science-panel-number div triggers a class of .active to be added to an #iphone-screen-number div.
Here is my jQuery:
$('#science-panel-1').hover(function(){
$('#iphone-screen-1').addClass('active');
},function(){
$('#iphone-screen-1').removeClass('active');
});
$('#science-panel-2').hover(function(){
$('#iphone-screen-2').addClass('active');
},function(){
$('#iphone-screen-2').removeClass('active');
});
$('#science-panel-3').hover(function(){
$('#iphone-screen-3').addClass('active');
},function(){
$('#iphone-screen-3').removeClass('active');
});
My HTML:
<div class="col-md-4">
<div id="science-panel-1" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-2" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-3" class="science-panel__item">
Content goes in here!
</div>
</div>
<div class="col-md-4">
div id="iphone-screen-1" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
div id="iphone-screen-2" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-3" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-4" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-5" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-6" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
</div>
<div class="col-md-4">
<div id="science-panel-4" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-5" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-6" class="science-panel__item">
Content goes in here!
</div>
</div>
This feels like a lot of code to do the same script. Is there a way to have one piece of script that can add the numbers it self? As #science-panel-1 will always link to to #iphone-screen-1 and so on.

This will do what you need. Just apply the handlers to elements whose ID begins with science-panel-, which should cover all of them...
$("[id^=science-panel-]").hover(function() {
// get the corresponding iphone-screen element id
var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-");
$(iphoneScreen).addClass("active");
},function() {
var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-");
$(iphoneScreen).removeClass("active");
});

I recommend changing the markup to include the data you need to drive the script:
<div data-target="#iphone-screen-1" id="science-panel-1" class="science-panel__item">...</div>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
This allows you to select all the science panel items at once:
$('.science-panel__item')
and perform the exact same script on each of them:
$('.science-panel__item').hover(function () {
$($(this).data('target')).addClass('active');
// ^^^^^^^^^^^^^^^^^^^^^^
// use the data-target attribute as a selector
}, function () {
$($(this).data('target')).removeClass('active');
});
If you change the attribute and the selector, you'll have a reusable feature you can apply to any element:
$('[data-hover-target]').hover(function () {
$($(this).data('hoverTarget')).addClass('active');
}, function () {
$($(this).data('hoverTarget')).removeClass('active');
});

I'd firstly ask if the active class is strictly necessary? Can what you want be achieved with CSS if it is for styling only by using the :hover pseudoclass?
If you do need the .active class for some reason, I would change the markup to be a little more generic so that all the science panels had a CSS class of .science-panel and all the iphone screens had a class of .iphone-screen. Then you could simplify the JS to look like
$('.science-panel').on('mouseenter mouseleave', function(e) {
$(this).find('.iphone-screen').toggleClass('active', e.type === 'mouseenter');
});
This will find the .iphone-screen inside of the .science-panel that you hover over and toggle the class to on if the mouse enters and off when the mouse leaves it.
edit: I see you've updated your answer to include your markup, this answer was assuming that your iphone-screens were nested in the science-panels so this won't necessarily work for you if you don't/can't nest your markup

Hide and show elements using one function and number argument

<script>
function gato(n){
if(n == 1){
document.getElementById("A" + n).style.display="block";
}
if(n == 2){
document.getElementById("B" + n).style.display="block";
}
}
</script>
<body style="width:auto">
<div class="wrapper">
<div class="cuadro1" onClick="gato(1)">
<div style="display:none" id="A1" onClick="gato(2)"> <img src="images/x.png" alt=""/> </div>
<div style="display:none" id="B2" onClick="gato(1)"> <img src="images/o.png" alt=""/> </div>
</div>
</div>
What is supposed to happen is: when you click the div class cuadro1 then the div with id A1 is going to be displayed, then when you click that div(id A1) then the div id B2 is going to be displayed. then you can click that div id B2 and go back to div id A1.
I believe the problem lies in that you have to un-display id A before displaying id B2 with document.getElementById("B2").style.display="none"; but I just can't get it to work.

Because you're a beginner, I also made changes to your design:
HTML
<div class="wrapper">
<div class="cuadro1" onClick="gato(1)">
<h1>Click here to show #1</h1>
</div>
<div>
<div style="display:none" id="A1" onClick="gato(2, this)"> <h2>DIV#1</h2> </div>
<div style="display:none" id="A2" onClick="gato(1, this)"> <h2>DIV#2</h2> </div>
</div>
</div>
I put #A1 and #A2 from class="cuadro1". This is because click events bubble from the clicked element to his parents. So when anyone clicks A1 or A2 the cuadro1 is also clicked. That means A1 would be allways shown.
I also renamed B2 to A2 for convenience.
Javascript
functiongato(n, clickedDiv) {
// Hide the div that was clicked
if(clickedDiv!=null)
clickedDiv.style.display = "none";
// Change whatever ID is given
document.getElementById("A" + n).style.display="block";
}
To save ourselves time, we can use this refference in onclick to hide div that was clicked. The clickedDiv!=null allows you to pass nothing if you don't want to hide clicked div. Since names are now A1 and A2, if statement is no longer needed.
Here's a test: https://jsfiddle.net/1zojdvt0/

Here is one way to accomplish this, using css. Add/remove a class from your elements and use CSS styling based on class to hide the div contents.
Javascript:
function gato(n, clicked){
if(clicked) {
clicked.classList.add('hidden');
}
var showElem = (n == 1 ? "A1" : "B2");
document.getElementById(showElem).classList.remove('hidden');
}
HTML:
<div class="wrapper">
<div class="cuadro1" onClick="gato(1, null)">Click Me
<div class="hidden" id="A1" onClick="gato(2, this)">A1 </div>
<div class="hidden" id="B2" onClick="gato(1, this)">B2 </div>
</div>
</div>
CSS:
.hidden { display:none;}
JSFiddle

Visibility of element function in javascript is not working

I have made a search bar that I want to show when user will click on search image that is list item as
<li class="item" onclick="showSearch()"><img id="search" src="images/search.png" ></li>
I set the visibility to hidden in HTML as
<div id="bar_search" style="visibility:hidden;">
have a function as
function showSearch () {
document.getElementById("bar_search").style.visibility = "visible";
}
but when i click on list item it does not show however hidden property working fine.
where I'm making mistake please tell me, thanks
Update:
content in the div
<div id="bar_search" style="visibility:hidden;">
<img id="searchbar" src="images/searchBar.png">
<div id="searchDec">
<input type="text">
<button ><b>Search</b></button>
</div>
</div>

Try setting the property through your style sheet and see if you can't get it to change with the event-handler.
<node class="hidden" onclick=toggleVisibilty()"></node>
Or if your not opposed to using jQuery, then you could always use the toggle method, so as to toggle the class that way.
http://api.jquery.com/toggle/

your code is fine maybe you have syntax error in the same page
function showSearch() {
document.getElementById("bar_search").style.visibility = "visible";
}
<li class="item" onclick="showSearch()">
<img id="search" src="https://wiki.ubuntu.com/IconsPage?action=AttachFile&do=get&target=search.png">
</li>
<div id="bar_search" style="visibility: hidden;">
<img id="search" src="http://i.stack.imgur.com/X6BXa.png">
</div>

Onclick event issue after using the outerHTML

this is the code :
$(".adauga_incasare").click(function(){
var html = $(".incasari")[0].outerHTML;
$(html).insertAfter($(".incasari").last());
});
$(".del_incasare").click(function(){
alert("dsdasdasd");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<div class="incasari">
<div class="data_incasare_container">
<label><b>Data</b></label>
<input class ="data_incasare" type="text" id="datepicker">
<label class ="data_incasare_hidden">12-06-2014</label>
</div>
<div class="suma_incasare_container" style="">
<label><b>Suma</b></label>
<input class="suma_incasare" type="text" maxlength="8" name="pret_unitar[]" alt="">
<label class ="suma_incasare_hidden">100</label>
</div>
<div class="coscos" style="">
<a class="stergereIncasare" href="javascript:void(0);"><i class="icon-trash"></i></a>
<div style="clear:both;"></div>
<div class ="incasare_action">
<input class="btn btn-success" type="button" style="margin-left:50px;width:80px;height:30px;float:left;" value="Salveaza"></input>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
+ Adauga incasare noua
<div class="toram">
<label style = 'cursor:default;'>Total incasat: <b>100 €</b></label>
<label style = 'cursor:default;'>Total ramas: <b>1012 €</b></label>
</div>
</div>
the outerHTML works fine, but when i "clone" the class incasari after that , when the onclick event doesnt work on the clone part. I have a delete button. In the first class "incasari" in works , but in the clone class it does not . Why ?

Use Event Delegation because your element is dynamically created after the click event was assigned. For example, to delegate to the document:
Demo
$(document).on("click", ".del_incasare", function(){
alert("dsdasdasd");
});
This means all clicks will be checked by the .del_incasare selector, and if it matches then the function will run, regardless of when the element was created.

The method you used to fire click event only works with the DOM elements that has been created during page load, DOM elements created dynamically would not be handled by this method.
For the elements created after page load or dynamically you have to use Event Delegation. For this use jQuery on method.
$(document).on("click", ".del_incasare", function(){
// do some cool stuff here.
});
You can use any parent element instead of document here, that was already in DOM during page load.

How to display div with JavaScript depending on which image is clicked

I wish to display certain divs inside a main div dependent on which image is clicked. With out any decent knoweldge of Js or Jquery, I fail to do this without some assistance.
<form>
<input type="hidden" name="prod">
<div id="images">
<img id="one" src="http://lorempixel.com/200/200/">
<img id="two" src="http://lorempixel.com/201/200/ ">
<img id="three" src="http://lorempixel.com/203/200/ ">
<img id="four" src="http://lorempixel.com/204/200/ ">
</div>
</form>
<div id="description">
</div>
<div class="one">Brilliant</div>
<div class="two">Super</div>
<div class="tree">Amazing</div>
<div class="four">Excellent</div>
If the image which has id="one" is clicked, then display <div class="one">Brilliant</div> inside of the description div. Then ofcause if the second image is clicked, then display the the 'super' div inside the description div. I'd like to not have the descriptions visible until clicked, and only one div at a time to be shown.
The images are apart of a form because I need to forward the value of the id on the images to a variable.
Here is the script that does that.
$('#images').delegate('img', 'click', function () {
var $this = $(this);
// Clear formatting
$('#images img').removeClass('border-highlight');
// Highlight with coloured border
$this.addClass('border-highlight');
// Changes the value of the form field prod to the file name shown in the image.
$('[name="prod"]').val($this.attr('id').substring($this.attr('id').lastIndexOf('-') + 1));
//Alert for debugging simplicity
alert($('[name="prod"]').val());
});
Perhaps a function can be implemented into the current script?
Here is a fiddle, and it will all make sense of what I have as a whole currently.

Check out this fidde
You just need to add:
$('#description').html($('.' + $this.attr('id')).html());
At the bottom of your onclick function.
** You have a typo on the 3rd div with text(tree instead of three).

You can make it bit simple by adding the divs for description in div as I see no need to put the divs for description outside the description div and later adding it. You will need to hide all the divs we have in description div and show the one that is related to img being clicked.
Live Demo
Html
<input type="hidden" name="prod">
<div id="images">
<img id="imgone" src="http://lorempixel.com/200/200" />
<img id="imgtwo" src="http://lorempixel.com/201/200" />
<img id="imgthree" src="http://lorempixel.com/203/200" />
<img id="imgfour" src="http://lorempixel.com/204/200" />
</div>
<div id="description">
<div id="one">Brilliant</div>
<div id="two">Super</div>
<div id="three">Amazing</div>
<div id="four">Excellent</div>
</div>
Javascript
$('#images').delegate('img', 'click', function () {
$('#description div').hide();
$('#' + this.id.replace('img', '')).show();
});