We Keep Coding

Javascript - Inserting Image Text and description in a container

<div id="CollectionALL">
<div id="collection1" class="col">
<img id="Img1" class="imageCS"/>
<H1 id="Title1"></H1>
<p id="Text1"></p>
</div>
<div id="collection2" class="col">
<img id="Img2" class="imageCS"/>
<H1 id="Title2"></H1>
<p id="Text2"></p>
</div>
</div>
Hi all,
I'm just starting out on javascript and would like to check how i should go about replacing or inserting an image into each of the Img1, Img2 and Img3 tags.
I believe once i'm able to figure out the image, the title and texts should be in the same method?
function displayResult()
{
var collect1=document.getElementById("img1").rows[0];
var x=collect1.insertCell(-1);
x.innerHTML="<img src='img/abc.png' alt='collection1'/>";
}

You need to specify the selectors for h1, p, img inner your container. then you can use setAttribute and innerHTML function to set content.
Then you can wrapped inside a loop and iterate the result array. The example below will shows you how it works inside the loop.
like that
function displayResult()
{
var collect = document.getElementById("collection1");
let img = collect.querySelector('img');
let h1 = collect.querySelector('h1');
let p = collect.querySelector('p');
img.setAttribute('src', "https://via.placeholder.com/100");
h1.innerHTML = "collection1";
p.innerHTML = "some text"
}
displayResult()
<div id="CollectionALL">
<div id="collection1" class="col">
<img id="Img1" class="imageCS"/>
<H1 id="Title1"></H1>
<p id="Text1"></p>
</div>
<div id="collection2" class="col">
<img id="Img2" class="imageCS"/>
<H1 id="Title2"></H1>
<p id="Text2"></p>
</div>
</div>

I'm unsure if I understood your question correctly, but if I did I see no use for JS to be used in here. Simply insert your src, title and text through the HTML.
<div id="CollectionALL">
<div id="collection1" class="col">
<img id="Img1" class="imageCS" src="img/abc.png">
<h1 id="Title1">My Title</h1>
<p id="Text1">My Text</p>
</div>
<div id="collection2" class="col">
<img id="Img2" class="imageCS" src="img/abc.png>
<h1 id="Title2">My Title</h1>
<p id="Text2">My Text</p>
</div>
</div>
note that "img" is not a tag with a closing, thus ending it with a />:
<img id="Img2" class="imageCS"/>
is not quite right. Also, tags in HTML are case-sensitive, and so "H1" is not a valid tag, but "h1" is.

var ImgA= document.getElementById("Img1");
Img1.src = "abc.jpg";
var TitleA= document.getElementById("Title1");
TitleA.textContent = "Some Title Header Thing";
var TextA= document.getElementById("Text1");
TextA.textContent = "qwerty some text";
I think i'll be doing it this way.
Seems to work
Thanks to everyone

Onclick event problems

I have an issue with my onclick event. I want to have a sub-menu within my page. I have 5 icons on my page. when I click on one icon, the other 4 icons disappear. when the 4 icons disappear, there will show up an couple of buttons to go to other pages.
my problem with this event is that the other buttons, don't show up. and i do not know what the problem is...
I made a video to show the problem;
https://youtu.be/F2NUj3KVIIk
my code;
<div id="column">
<p id="afbeelding-spiraal">
<img width="150" id="spiraal" src="https://www.spiralex.nl/wp-content/uploads/2020/12/spiraal-correct.png">
</p>
</div>
<div id="column">
<p id="afbeelding-plaat">
<img width="150" id="plaat" src="https://www.spiralex.nl/wp-content/uploads/2020/12/platenwisselaar-correct.png">
</p>
</div>
<div id="column">
<p id="afbeelding-lucht">
<img width="150" id="lucht" src="https://www.spiralex.nl/wp-content/uploads/2020/12/lucht-1.png">
</p>
</div>
<div id="column">
<p id="afbeelding-skids">
<img width="150" id="skids" src="https://www.spiralex.nl/wp-content/uploads/2020/12/skids-correct.png">
</p>
</div>
</div>
<div id="text">
<div id="text-buis">
<button id="zwembadwarmtewisselaar">Zwembadwarmtewisselaar</button>
</div>
<script type="text/javascript">
var buis = document.getElementById("buis")
var spiraal = document.getElementById("spiraal")
var plaat = document.getElementById("plaat")
var lucht = document.getElementById("lucht")
var skids = document.getElementById("skids")
buis.onclick = function(){
if(spiraal.className ==""){
spiraal.className = "hide";
plaat.className = "hide";
lucht.className = "hide";
skids.className = "hide";
zwembadwarmtewisselaar.className = "show";

You need to make a reference to zwembadwarmtewisselaar also. var zwembadwarmtewisselaar = document.getElementById("zwembadwarmtewisselaar");

jquery show/hide content in div without hardcoding

I have 3 divs, there is content(images) inside of them. When you click on one of them content of it becomes visible and content of other two becomes hidden. I've been managed to achieve that with jquery code(you can check for it below), but the bad thing it's hardcoded, is there any other methods do do it?
P.S.: "https://solomia-gera.github.io/" is the site itself if you want to have a look.
---------------------------------------------------------THE CODE-----------------------------------------------------
<!-- Hide/Show DIV1 content-->
<script>
// Hide content in div with id#mox when cliked on div with id#content
$("#mox2").on("click", function () {
$("#content1").hide();
});
$("#mox3").on("click", function () {
$("#content1").hide();
});
// Show content in div with id#mox when cliked on div with id#content
$("#mox1").on("click", function () {
$("#content1").show();
});
</script>
<!-- Hide/Show DIV2 content-->
<script>
$("#content2").hide();
// Hide content in div with id#mox when cliked on div with id#content
$("#mox1").on("click", function () {
$("#content2").hide();
});
$("#mox3").on("click", function () {
$("#content2").hide();
});
// Show content in div with id#mox when cliked on div with id#content
$("#mox2").on("click", function () {
$("#content2").show();
});
</script>
<!-- Hide/Show DIV3 content-->
<script>
$("#content3").hide();
// Hide content in div with id#mox when cliked on div with id#content
$("#mox2").on("click", function () {
$("#content3").hide();
});
$("#mox1").on("click", function () {
$("#content3").hide();
});
// Show content in div with id#mox when cliked on div with id#content
$("#mox3").on("click", function () {
$("#content3").show();
});

Given that all three have a common class mox, and if you add a common class content to each of the content divs you can do this:
$(".mox").click(function() {
$(this).children(".content").show();
$(".mox").not(this).children(".content").hide();
}
Explanation: the function is called whenever you click on any element with a mox class. this selector lets you select the particular instance of the class that was clicked, children() selects any child elements and when we put a selector as an argument for children(), it selects all child elements that match that selector. Second line works similarly, with an addition of not(this), so the second line reads hide all elements that match content class and are children of any element with class mox, but this one.
EDIT: If for some reason you do not want to assign a common class to all content divs, the following function will work as is:
$(".mox").click(function() {
$(this).children("[id^=content]").show();
$(".mox").not(this).children("[id^=content]").hide();
}
Here I used attributeStartsWith selector, read more here.

There is much better way for doing this
You can simply use the following code
$('.content').on('click', '.img-heading', function(){
$(this).parent('.content').siblings('.content').removeClass('active');
$(this).parent('.content').addClass('active');
})
Codepen link

if your content is outside mox, you can apply a same class for each element and add a data for show only what you want.
$(".mox").on("click", function () {
var content = $(".content")
content.hide();
content.eq($(this).attr("data-content")-1).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mox" data-content="1">Show one</div>
<div class="mox" data-content="2">Show two</div>
<div class="mox" data-content="3">Show three</div>
<div class="content" style="display:none;width:100px;height:100px; background:red" ></div>
<div class="content" style="display:none;width:100px;height:100px; background:blue" ></div>
<div class="content" style="display:none;width:100px;height:100px; background:green" ></div>

try this code
$('.mox').on('click', function(){
$('.image_list').hide();
var $index = $('.mox').index(this);
$('.image_list').eq($index).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box">
<div id="mox1" class="mox">
<p class="hide">
O<br>V<br>E<br>R<br>V<br>I<br>E<br>W
</p>
<div id="content1" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
<!-- ALBUMS -->
<div id="mox2" class="mox">
<p class="">
A<br>L<br>B<br>U<br>M<br>S
</p>
<div id="content2" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
<!-- ABOUT -->
<div id="mox3" class="mox">
<p class="">
A<br>B<br>O<br>U<br>T
</p>
<div id="content3" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
</div>

Based on your code:
function myCustomHide(contentIds, moxsIds){
contentIds.forEach(function(element, index) {
index !== 0 ? $("#"+element).hide(): null;
moxsIds.forEach(function(moxElem, moxIndex){
if(index !== moxIndex){
$("#"+moxElem).on("click", function(){
$("#"+element).hide();
});
}
});
$("#"+moxsIds[index]).on("click", function(){
$("#"+element).show();
});
});
}
var contentsIds = [ "content1", "content2", "content3"];
var moxsIds = [ "mox1", "mox2", "mox3"];
myCustomHide(contentsIds, moxsIds);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div id="mox1">
Overview
</div>
<div id="content1" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
<!-- ALBUMS -->
<div id="mox2">
Albums
</div>
<div id="content2" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
<!-- ABOUT -->
<div id="mox3">
About
</div>
<div id="content3" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
or check the fiddle for slight different html: https://jsfiddle.net/oy7vj7fq/2/

How to use onmousehover event on multiple elements?

<html>
<head>
<script>
function show_function() {
var example_image=document.getElementById("example_image");
example_image.src="example_one.png";
}
function hide_function() {
var example_image=document.getElementById("example_image");
example_image.src="example.png";
}
</script>
</head>
<body>
<div class="one" onmouseover="show_function()" onmouseout="hide_function()">
<img id="example_image" src="example.png">
</div>
<div class="two" onmouseover="show_function()" onmouseout="hide_function()">
<img id="example_image" src="example.png">
</div>
</body>
</html>
When I hover the mouse over first div,the image changes. But when I hover the mouse over second div then also the image from the first div changes.
Does anyone know how to do it only in javascript?

Like Danko said, ID must be unique. Next step will be to insert variables into your function:
<html>
<head>
<script>
function show_function(id, hide)
{
var example_image=document.getElementById(id);
if(hide){
example_image.src="example.png";
} else{
example_image.src="example_one.png";
}
}
</script>
</head>
<body>
<div class="one"
onmouseover="show_function('example_image1')"
onmouseout="show_function('example_image1', true)" />
<img id="example_image1" src="example.png">
</div>
<div class="one"
onmouseover="show_function('example_image2')"
onmouseout="show_function('example_image2', true)" />
<img id="example_image2" src="example.png">
</div>
</body>
</html>
Or you can go like this too:
<img src="example.png"
onmouseover="this.src='example_one.png';"
onmouseout="this.src='example.png';" />
Hope it helps!

You can do it like this:
show_function = function (container) {
container.childNodes[1].src = "example_one.png";
}
hide_function = function (container) {
container.childNodes[1].src = "example.png";
}
then in HTML, pass this to function:
<div class="one" onmouseover="show_function(this)" onmouseout="hide_function(this)">
<img id="example_image" src="example.png">
</div>
<div class="two" onmouseover="show_function(this)" onmouseout="hide_function(this)">
<img id="example_image" src="example.png">
</div>

I think you want the first child node [0] of the div. and pass the hovered object into the callback.
function show(e){
document.getElementById('label').innerHTML = e.children[0].id;
e.style.border = "solid 2px red";
}
function hide(e){
e.style.border = "0";
}
<div class="one" onmouseover="show(this)" onmouseout="hide(this)">
<img id="example_image" src="example.png" class="one" >
</div>
<div class="two" onmouseover="show(this)" onmouseout="hide(this)">
<img id="example_image" src="example.png" class="two">
</div>
<p id='label' ></p>

change img class with checkbox

<div class="outerBox">
<img src="pics/folder1/img1.jpg" alt="small image" class="unmarkedImg">
<div class="innerBox">
<img src="pics/folder1/img1.jpg" alt="big image">
<input type="checkbox"><span>Image</span>
</div> <!-- innerBox -->
</div> <!-- outerBox -->
I've a problem with javascript to change
<img src="pics/folder1/img1.jpg" alt="small image" class="unmarkedImg">
class with the checkbox <input type="checkbox">.
When the checkbox is checked the img class will change from "unmarkedImg" to "markedImg", and when you checked-off the checkbox the change will reverse.
<div class="outerBox">
<img src="pics/folder1/img1.jpg" alt="small image" class="unmarkedImg">
<div class="innerBox">
<img src="pics/folder1/img1.jpg" alt="big image">
<input type="checkbox"><span>Image</span>
</div> <!-- innerBox -->
</div> <!-- outerBox -->
<div class="outerBox">
<img src="pics/folder1/img2.jpg" alt="small image" class="unmarkedImg">
<div class="innerBox">
<img src="pics/folder1/img2.jpg" alt="big image">
<input type="checkbox"><span>Image</span>
</div> <!-- innerBox -->
</div> <!-- outerBox -->
<div class="outerBox">
<img src="pics/folder1/img3.jpg" alt="small image" class="unmarkedImg">
<div class="innerBox">
<img src="pics/folder1/img3.jpg" alt="big image">
<input type="checkbox"><span>Image</span>
</div> <!-- innerBox -->
</div> <!-- outerBox -->
<div class="outerBox">
<img src="pics/folder1/img4.jpg" alt="small image" class="unmarkedImg">
<div class="innerBox">
<img src="pics/folder1/img4.jpg" alt="big image">
<input type="checkbox"><span>Image</span>
</div> <!-- innerBox -->
</div> <!-- outerBox -->
If I can bother with another question. How would I change the javascript you have given so more then one do the same thing. If you check one of the boxes the image of that checkbox become change from "unmarkedImg" to "markedImg", and reverse. Do I just give theme their own "id" (because ElementByClassName("class").onclick/onchange does not work) or is there any more easier or more dynamic way to do so?

jsFiddle here.
I've outlined a simple way to do it (I'm assuming you're just wanting pure JavaScript here) below with explanations:
HTML:
<img id="theImage" src="pics/flowers/f0.jpg" alt="Liten bild" class="unmarkedImg">
<input onclick="toggleImgClass()" id="example" type="checkbox">
Javascript:
function toggleImgClass(){
var example = document.getElementById('example');
// Set a variable for the checkbox element with the ID 'example'
if (example.checked){ // If the checkbox is checked
document.getElementById("theImage").className = "markedImg";
// Other classes are removed from the image and replaced with markedImg
}else{ // Else if the checkbox isn't checked
document.getElementById("theImage").className = "unmarkedImg";
// Other classes are removed from the image and replaced with unmarkedImg
}
}
Edit: In reply to your updated question, an alternative to #smerny's answer for an adaptable function could look like this.
Firstly, check this new jsFiddle.
HTML:
<div class="outerBox">
<img src="http://www.microugly.com/images/tutorials/inkscape-small-icon/icon-zoom-pixelated.png" alt="Liten bild" name="images" class="unmarkedImg"/>
<div class="innerBox">
<input type="checkbox" onclick="toggleImgClass()" class="example"/>
<span>Prästkrage</span>
</div>
</div>
Javascript:
function toggleImgClass() {
var example = document.getElementsByClassName('example');
// Set a variable for all checkbox elements with the class name 'example'
for(i=0; i<example.length; i++) { // For each element with the class name 'example'
if (example[i].checked){ // If this one is checked
document.getElementsByName("images")[i].className = "markedImg";
// Set its corresponding image to have the markedImg class.
}else{
document.getElementsByName("images")[i].className = "unmarkedImg";
// Set its corresponding image to have the unmarkedImg class.
}
}
}
Note that using inline JavaScript (such as <input onclick="toggleImgClass()">) isn't best practice, but in this case I'm simply trying to show you a simple example of how the basics of JavaScript work, so hopefully you can start to make improvements on it yourself.

Here is a way to write it without adding javascript to an element:
http://jsfiddle.net/Jb7yM/
document.getElementById("MyCheckbox").onclick=function() {
if(this.checked) {
document.getElementById("MyImage").className = "markedImg";
} else {
document.getElementById("MyImage").className = "unMarkedImg";
}
}
Edit: if you want to be able to do multiple images, you could do something like this:
http://jsfiddle.net/Jb7yM/2/
var checkboxes = document.getElementsByClassName("MyCheckbox");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].onclick = function () {
var imgNode = this.parentNode.firstChild;
while (imgNode.tagName != "DIV") { //change to IMG in your case
imgNode = imgNode.nextSibling
}
if (this.checked) {
imgNode.className = "markedImg";
} else {
imgNode.className = "unMarkedImg";
}
}
}
and wrap your image/checkbox groupings like this:
<div class="imgGroup">
<div class="unMarkedImg">img</div><!-- div for example, you'd have an image -->
<br />
<input type="checkbox" class="MyCheckbox" />
</div>
Edit2: i see you added your html to your question, this will work with your current html without having to put onclicks in your elements (generally a practice I always try to avoid), all you need to do is add "MyCheckbox" class to your checkboxes (or change the name of the class to something that suits you better):
http://jsfiddle.net/c8DPz/
var checkboxes = document.getElementsByClassName("MyCheckbox");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].onclick = function () {
var imgNode = this.parentNode.parentNode.firstChild;
while(imgNode.tagName != "IMG") {
imgNode = imgNode.nextSibling
}
if (this.checked) {
imgNode.className = "markedImg";
} else {
imgNode.className = "unMarkedImg";
}
}
}