Develop Reference

Assign TWO Images to Radio Button

Hi so I have this "product" page (on Fiddle) where I have multiple radio boxes in two classes .choosesize and .choosetea. I want to set up my code where if the 8oz radio button is selected then one set of pictures will appear for all the tea selections and if the 16oz radio button is selected another set of pictures will appear for the tea selections.
I have assigned the small and big images to each tea option but I do not know how to show the small pictures if the small 8oz option is selected.

While you don't have all the "combined" images, I have added a possible solution.
var size = "small"
var teatype = "green"
$('.choosetea input').on('click', function() {
teatype = $(this).attr('data-image');
console.log(size + "_" +teatype)
$('.active').removeClass('active');
$('.columnleft img[data-image = ' + size + "_" +teatype + ']').addClass('active');
$(this).addClass('active');
});
$('.choosesize input').on('click', function() {
size = $(this).attr('data-image');
console.log(size + "_" +teatype)
$('.active').removeClass('active');
$('.columnleft img[data-image = ' + size + "_" +teatype + ']').addClass('active');
$(this).addClass('active');
});
So this will comebine size and teatype, So each image will have the data-image where it should be size_teatype
$(document).ready(function() {
var size = "small"
var teatype = ""
$('.choosetea input').on('click', function() {
teatype = "_"+$(this).attr('data-image');
console.log(size +teatype)
$('.active').removeClass('active');
$('.columnleft img[data-image = ' + size +teatype + ']').addClass('active');
$(this).addClass('active');
});
$('.choosesize input').on('click', function() {
size = $(this).attr('data-image');
console.log(size +teatype)
$('.active').removeClass('active');
$('.columnleft img[data-image = ' + size +teatype + ']').addClass('active');
$(this).addClass('active');
});
//local storage color
//local storage size
// add the value of the added radio boxes in the text box
$('.radios1').change(function(e) {
var selectedValue = parseInt($(this).val());
selectedValue += parseInt($(".radios2").val());
$('#amount').val('$' + selectedValue)
});
//add to cart
});
const sizeSelector = 'input:radio[id=small]';
const colorSelector = 'input:radio[id=green]';
const cartSelector = 'button[name=cart]';
$(function() {
$(`${cartSelector}`).click(() => {
validityCheck();
});
const SMALL = 20;
const GREEN = 0;
const CARTBUTTON = 5;
function validityCheck() {
let $size = $(`${sizeSelector}`);
let $color = $(`${colorSelector}`);
let size_flag = $size.is(':checked');
let color_flag = $color.is(':checked');
$('#itemdv1A').toggle(size_flag && color_flag) && $('#itemdv2A').toggle(size_flag && color_flag) && $('#yourbutton').toggle(size_flag && color_flag);
}
});
const sizeSelector1 = 'input:radio[id=small]';
const colorSelector1 = 'input:radio[id=chamomile]';
const cartSelector1 = 'button[name=cart]';
$(function() {
$(`${cartSelector}`).click(() => {
validityCheck();
});
const CHAMOMILE = 1;
function validityCheck() {
let $size1 = $(`${sizeSelector1}`);
let $color1 = $(`${colorSelector1}`);
let size_flag1 = $size1.is(':checked');
let color_flag1 = $color1.is(':checked');
$('#itemdv1B').toggle(size_flag1 && color_flag1) && $('#itemdv2B').toggle(size_flag1 && color_flag1) && $('#yourbutton').toggle(size_flag1 && color_flag1)
};
});
const sizeSelector2 = 'input:radio[id=small]';
const colorSelector2 = 'input:radio[id=oolong]';
const cartSelector2 = 'button[name=cart]';
$(function() {
$(`${cartSelector}`).click(() => {
validityCheck();
});
const OOLONG = 2;
function validityCheck() {
let $size2 = $(`${sizeSelector2}`);
let $color2 = $(`${colorSelector2}`);
let size_flag2 = $size2.is(':checked');
let color_flag2 = $color2.is(':checked');
$('#itemdv1C').toggle(size_flag2 && color_flag2) && $('#itemdv2C').toggle(size_flag2 && color_flag2) && $('#yourbutton').toggle(size_flag2 && color_flag2);
}
});
document.querySelector('#yourbutton').onclick = function() {
document.querySelector('#itemscart').style.display = "none"
};
/* Basic Styling */
.container {
width: 1200px;
top: 300px;
left: 50px;
padding: 15px;
display: flex;
position: absolute;
}
/* Columns */
.columnleft {
width: 220%;
position: relative;
margin-left: 30px;
}
.columnright {
width: 120%;
top: 10px;
margin-left: 80px;
display: block;
}
/* Left Column */
.columnleft img {
width: 100%;
position: absolute;
opacity: 0;
transition: all 0.3s ease;
}
.columnleft img.active {
opacity: 1;
}
/* Product Description */
.product-description {
border-bottom: 1px solid #E1E8EE;
margin-bottom: 20px;
}
/* Product Color */
.tea-type {
margin-bottom: 30px;
}
.choosetea div {
display: block;
margin-top: 10px;
}
.label {
width: 150px;
float: left;
text-align: left;
padding-right: 9px;
}
.choosetea input {
display: none;
}
.choosetea input+label span {
display: inline-block;
width: 40px;
height: 40px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
}
.choosetea input+label span {
border: 4px solid RGB(94, 94, 76)
}
.choosetea input#green+label span {
background-color: #90978b;
}
.choosetea input#chamomile+label span {
background-color: #ffd4a1;
}
.choosetea input#oolong+label span {
background-color: #948e9e;
}
.choosetea input:checked+label span {
background-image: url(check-icn.svg);
background-repeat: no-repeat;
background-position: center;
}
/* SIZE */
.tea-type {
margin-bottom: 30px;
}
.choosesize div {
display: block;
margin-top: 10px;
}
.label {
width: 100px;
float: left;
text-align: left;
padding-right: 9px;
}
.choosesize input {
display: none;
}
.choosesize input+label span {
display: inline-block;
width: 40px;
height: 40px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
}
.choosesize input+label span {
border: 4px solid RGB(94, 94, 76)
}
.choosesize input#small+label span {
background-color: #252525;
}
.choosesize input#big+label span {
background-color: #1d1d1d;
}
.choosesize input:checked+label span {
background-image: url(https://noychat.github.io/Folia-Website/check-icn.svg);
background-repeat: no-repeat;
background-position: center;
}
/* Product Price */
.product-price {
margin-top: 40px;
display: flex;
align-items: center;
}
.product-price span {
font-size: 26px;
font-weight: 300;
color: #43474D;
margin-right: 20px;
}
.cart-btn {
display: inline-block;
background-color: RGB(94, 94, 76);
border-radius: 6px;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
padding: 12px 30px;
transition: all .5s;
}
.cart-btn:hover {
background-color: black;
}
.cart-btn2 {
background-color: RGB(94, 94, 76);
border-radius: 6px;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
padding: 12px 30px;
transition: all .5s;
width: 20px;
position: absolute;
}
#amount {
margin-right: 10px;
display: inline-block;
border-radius: 2px solid RGB(94, 94, 76);
border-radius: 6px;
font-size: 20px;
color: RGB(94, 94, 76);
width: 55px;
height: 40px;
padding-left: 10px;
transition: all .5s;
}
#shoppingcart {
width: 360px;
height: 300px;
/* border: 1px solid red; */
}
.item {
margin-right: 10px;
border-radius: 2px solid RGB(94, 94, 76);
border-radius: 6px;
font-size: 20px;
color: RGB(94, 94, 76);
width: 200px;
height: 30px;
padding-left: 10px;
transition: all .5s;
float: left;
}
.item1 {
margin-right: 10px;
border-radius: 2px solid RGB(94, 94, 76);
border-radius: 6px;
font-size: 20px;
color: RGB(94, 94, 76);
width: 55px;
height: 30px;
padding-left: 10px;
transition: all .5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header"></div>
<!--close all header portion-->
<div class="container">
<!-- Left Column---Tea Images -->
<div class="columnleft">
<img data-image="oolong" src="https://noychat.github.io/Folia-Website/oolongbig.png" alt=" Big Oolong Can">
<img data-image="chamomile" src="https://noychat.github.io/Folia-Website/chamomilebig.png" alt="Big Chamomile Can">
<img data-image="green" class="active" src="https://noychat.github.io/Folia-Website/greenteabig.png" alt="Big Green Tea Can">
<img data-image="small" class="active" src="https://noychat.github.io/Folia-Website/foliasmall.png" alt="Small Example Can">
<img data-image="big" src="https://noychat.github.io/Folia-Website/foliabig.png" alt="Big Example Can">
<img data-image="small_chamomile" src="https://noychat.github.io/Folia-Website/chamomilesmall.png" alt="Small Chamomile Can">
<img data-image="small_oolong" src="https://noychat.github.io/Folia-Website/oolongsmall.png" alt="Small Oolong Can">
<img data-image="small_green" src="https://noychat.github.io/Folia-Website/greenteasmall.png" alt="Small Green Tea Can">
</div>
<!-- Right Column -->
<div class="columnright">
<!-- Product Description -->
<div class="product-description">
<span>Folia Tea Collection</span>
<h1>Signature Teas</h1>
<p>We source our tea leaves from around the world. Try our many selections of teas and you will taste the difference.</p>
</div>
<!-- Product Configuration -->
<div class="product-configuration">
<!-- Tea Size -->
<div class="tea-type">
<h3>Size</h3>
<div class="choosesize">
<div>
<input data-image="small" type="radio" id="small" name="size" value="20" class="radios1">
<label for="small"><span></span></label>
<div class="label">8 oz</div>
</div>
<div>
<input data-image="big" type="radio" id="big" name="size" value="40" class="radios1">
<label for="big"><span></span></label>
<div class="label">16 oz</div>
</div>
</div>
<!--CLOSE TEA Size-->
<!-- Tea Type -->
<div class="tea-type">
<h3>Tea Type</h3>
<div class="choosetea">
<div>
<input data-image="green" data-image1="small_green" type="radio" id="green" name="color" value="0" class="radios2">
<label for="green"><span></span></label>
<div class="label">Green Tea</div>
</div>
<div>
<input data-image="chamomile" data-image1="small_chamomile" type="radio" id="chamomile" name="color" class="radios2" value="1">
<label for="chamomile"><span></span></label>
<div class="label">Chamomile Tea</div>
</div>
<div>
<input data-image="oolong" data-image1="small_oolong" type="radio" id="oolong" name="color" class="radios2" value="2">
<label for="oolong"><span></span></label>
<div class="label">Oolong Tea</div>
</div>
</div>
</div>
<!--CLOSE TEA TYPE-->
<h3>Product Pricing</h3>
<div class="product-price">
<input type="text" name="amount" id="amount">
<button type="button" class="cart-btn" id="cartbutton" name="cart" value="5">Add To Cart!</button>
</div>
</div>
</div>
<!--close CONTAINER-->
<div id="shoppingcart">
<h3>Shopping Cart</h3>
<h5>Item and Price</h5>
<div id="itemscart">
<div id="itemdv1A" style="display: none"> <input type="text" name="amount" class="item" value="8oz Green Tea"></div>
<div id="itemdv2A" style="display: none"> <input type="text" name="amount" class="item1" value="$20"></div>
<div id="itemdv1B" style="display: none"> <input type="text" name="amount" class="item" value="8oz Chamomile Tea"></div>
<div id="itemdv2B" style="display: none"> <input type="text" name="amount" class="item1" value="$20"></div>
<div id="itemdv1C" style="display: none"> <input type="text" name="amount" class="item" value="8oz Oolong Tea"></div>
<div id="itemdv2C" style="display: none"> <input type="text" name="amount" class="item1" value="$20"></div>
<button style="display: none" type="button" class="cart-btn2" id="yourbutton" name="remove" value="10">x</button>
</div>
</div>

how to save the elements value that is created with js direct| i want to use client side

i want to create a chat and i have been working on it.
here is the code below
<!DOCTYPE html>
<html>
<head>
<title>Aswin's Good Apps</title>
<!-- add icon link -->
<link rel = "icon" href =
"https://goodapps.w3spaces.com/AswinIcon.png"
type = "image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<style>
body{
background-color:pink;
color:purple;
font: 15px Arial, sans-serif;
}
#media screen and (max-width: 300px) {
body{
width: 100%;
}
}
.
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
/* Add a background color when the inputs get focus */
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for all buttons */
button {
background-color: purple;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.cancelbtn {
padding: 14px 20px;
background-color: #8B0000;
}
.cancelbtn, .signupbtn {
float: left;
width: 50%;
}
.signupbtn{
background-color:#013220;
}
.container {
padding: 20px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #0000ffff;
padding-top: 50px;
}
.modal-content {
background-color: #ff8c00;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%;
}
hr {
border: 1px solid blue;
margin-bottom: 25px;
}
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: white;
}
.close:hover,
.close:focus {
color: purple;
cursor: pointer;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
a{
font-size:25px;
color:purple;
text-decoration:none;
font-size:50px;
}
h2{
font-size:50px;
background-color: pink;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 12px;
}
#loading {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
text-align: center;
color:green;
background-color:yellow;
top: calc(50% - 30px);
left: calc(50% - 45px);
text-align: center;
font-weight: bold;
}
div.sticky1 {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 12px;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 130px;
height: 130px;
margin: -76px 0 0 -76px;
border: 16px solid greenyellow;
border-radius: 60%;
border-top: 16px solid yellow;
border-radius:60%;
border-bottom: 16px solid yellow;
-webkit-animation: spin 2s linear infinite;
animation: spin 1s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
}
ul{
list-style: none;
}
p{
font-size: 25px;
}
</style>
</head>
<body onload="myFunction()" style="margin:0;">
<div id="body">
<script>
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
document.getElementById('fail').style.display='none';
document.getElementById('goonthetrack').style.display='none';//
let messages = localStorage.getItem('message');
console.log(messages);
document.getElementById('result').innerHTML = messages;
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("loading").style.display="none";
}
//this will filter the results to which they have searched far
function searchresult(){
//this line tells the html tags we have used
var input, filter, ul, li, a, i, txtValue;
//this collects the inputs id
input = document.getElementById("mysearch");
//this tells about the filter
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
function validate()
{
if( document.getElementById("text1").value == "aswin.arulvel#gmail.com"
&& document.getElementById("text2").value == "aswinwebsitepass" )
{
document.getElementById("p1").innerHTML = "Hello Aswin";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("signup2").style.display = "none" ;
document.getElementById("login1").style.display = "none" ;
}
else if( document.getElementById("text1").value == "sathya.arulvel#gmail.com"
&& document.getElementById("text2").value == "sathyasaccount01" )
{
document.getElementById("p1").innerHTML = "Hello Sathya!";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("signup2").style.display = "none" ;
document.getElementById("login1").style.display = "none" ;
}
else if(document.getElementById("text1").value == "arulvel.kumarasamy#gmail.com"
&& document.getElementById("text2").value == "skar$SP50zxcvArulaccount")
{
document.getElementById("p1").innerHTML = "Hello Arulvel!";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("signup2").style.display = "none" ;
document.getElementById("login1").style.display = "none" ;
}
else if(document.getElementById("text1").value == "mine#3478"
&& document.getElementById("text2").value == "mine#3478")
{
document.getElementById("p1").innerHTML = "Hello Shreyan!";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("login1").style.display = "none" ;
document.getElementById("signup2").style.display = "none" ;
}
else
{
alert( "validation failed" );
document.getElementById("fail").style.display = "block" ;
}
}
function addmessaage()
{
let li = document.createElement("li");
let li2 = li.classname = "li2";
let textToChange = document.getElementById('chatmessage').value;
let t= document.createTextNode(textToChange);
li.appendChild(t);
document.getElementById('result').appendChild(li);
document.getElementById('chatmessage').value ="";
var multisave = document.getElementById('result').value;
for (i = 0 ; i < li2.length; i++) {
li2[i].onclick = function() {
var div = this.parentElement;
}
}
localStorage.setItem("message", textToChange);
}
</script>
<a href="goodapps.w3spaces.com/fractionscalc.html">We just put fraction calculer! Explore it!
<div class="container mt-3" style="background-color:pink; text-align:left;">
<div class="sticky">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<p id="p1">Not logged in</p>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" style="font-size:20px;"> <i class="fa fa-home"></i>Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="login1" data-toggle="tab" href="#login" style="font-size:20px;"><i class="fa fa-sign-in"></i>Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" id="signup2" data-toggle="tab" href="#menu3" style="font-size:20px;"> <i class="fa fa-user-plus" aria-hidden="true"></i>Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2" style="font-size:20px;"><i class="fa fa-database" aria-hidden="true"></i>Good Apps</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu4" style="font-size:20px;"><i class="fa fa-comment" aria-hidden="true"></i>Chat</a>
</li>
<iframe style="text-align:right;"width="145" height="102" src="https://goodapps.w3spaces.com/dateaswin.html" style="float:right; text-decoration: none; margin-right: 100px;">
</iframe>
</div>
</li>
</ul>
</div>
<!-- Tab panes -->
<div style="background-color:pink;"class="tab-content">
<div id="home" class="container tab-pane active"><br>
<i class="fa fa-home" style="font-size:50px;"></i><h3><i class="fa-duotone fa-house"></i>HOME</h3>
<img src="https://goodapps.w3spaces.com/AswinIcon.png"/ width="200" height="360px">
<p>Welcome to Aswin.</p>
<a class="nav-link" data-toggle="tab" href="#login" style="font-size:20px;">Login</a>
<a class="nav-link" data-toggle="tab" href="#menu3" style="font-size:20px;"> Sign Up</a>
</div>
<div id="login" class="container tab-pane fade"><br>
<i class="fa fa-sign-in" style="font-size:50px;"> </i></i><h3>Login</h3>
<p>Log in to save your work and have a more personalized experience.</p>
<form action="#home">
<input type="text" style = "width:15%;"class="form-control" placeholder="Username" id="text1" />
<input type="password" class="form-control" placeholder="Password" id="text2" style="width:15%;"/>
<input type="button" value="Login" class="btn btn-info" onclick="javascript:validate()" />
</form>
<div class="alert alert-danger" id="fail">
<p>Incorrect username or password.</p>
</div>
<div class="alert alert-success" id="goonthetrack">
<p>You have succesfuly logged in.</p>
</div>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Good Apps</h3>
<p>These are all good apps and have a lot of helpful info and all that stuff Items that are tagged "Under Development" are not finished and may have issues.</p>
<input type="search" id="mysearch" placeholder="Search Apps..." style="margin-top: 8px;
padding: 14px;
float: right; " onkeyup="searchresult()"
>
<ul id="myUL">
<li> Aswin's Tutorials</li>
<br>
<br>
<li>Aswin's Stories</li>
<br>
<br>
<li>Aswin's Sentences</li>
<br>
<br>
<li>Aswin's Games</li>
<br>
<br>
<li> Aswin's Calculater</li>
<br>
<br>
<li>Aswin's Writer</li>
<br>
<br>
<li>Aswin's Code Editor</li>
<br>
<br>
<li> Aswin's Dictonary</li>
<br>
<br>
<li> Aswin's Galaxy Director (under devolopment)
</li><br>
<br>
<li> Aswin's Star Collage(under devolopment)
</li><br>
<br>
<li> Aswin's Facts(under devolopment)</li>
</ul>
</div>
<div id="menu3" class="container tab-pane fade"><br>
<i class="fa fa-user-plus" style="font-size:50px;" aria-hidden="true"></i><h3>Sign UP</h3>
<form action="#home">
<p>Enter your email:</p>
<input type="email" class="form-control" required>
<p>Set a password:</p>
<input type="password" class="form-control" required>
<p>Repeat Password:</p>
<input type="password" class="form-control" required>
<input type="checkbox" class="form-control" required style="text-align:left;" name="I agree to the terms of service." id="agree" value="I agree to the terms of service."/><p>By signing up, I agree to the terms of service.</p>
<input type="submit" class="form-control" value="Sign Up">
</form>
</div>
<div id="menu4" class="container tab-pane fade"><br>
<i class="fa fa-comment" style="font-size:50px;" aria-hidden="true"></i><h3>chat</h3>
<form action="#home">
<ul id="result" style="font-size:50px; display: inline-block;overflow:auto; height:150px;" class="form-control">
</ul>
<input type="text" id="chatmessage" class="form-control">
<input type="button" value="Send" onclick="addmessaage()" id="save" class="btn btn-success">
</form>
</div>
</div>
<div class="sticky">
</iframe>
</div>
</div>
</div>
<div id="loader"></div><p id="loading">Loading...</p>
</div>
</body>
</html>
i want to save the elements that the js has been created.
i want to use client-side javascript and use localstorage().
issue is i can't save multiple messages.
go to the chat section and make the snippet full screen
please help me

HTML Select item show div and post problem

I am confused. I want two products to be selected. These products will be open by clicking the button. The selection will be made on the screen that opens. And the selected product will replace the button clicked.
I can show the products by clicking the button. I even got the result I wanted as text with jquery. But I used <select> <option> for this. There will be no drop-down list and only one will be selected. The selected image will replace the clicked area. I couldn't :(
$(document).ready(function() {
$(".showbutton, .showbutton img").click(function(event) {
var buttonName = $(this).closest('div').attr('id');
var buttonNo = buttonName.slice(4);
var boxName = "#box" + buttonNo;
$(boxName).fadeIn(300);
});
$(".closebtn").click(function() {
$(".box").fadeOut(200);
});
$(".box").click(function() {
$(".box").fadeOut(200);
});
$(".innerbox").click(function() {
event.preventDefault();
event.stopPropagation();
});
});
div.showbutton {}
div.showbutton:hover {}
.box {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.innerbox {
overflow: scroll;
width: 80%;
height: 80%;
margin: 5% auto;
background-color: white;
border: 3px solid gray;
padding: 10px;
box-shadow: -10px -10px 25px #ccc;
}
#box1 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
#box2 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
.closebutton {
width: 20%;
float: right;
cursor: pointer;
}
.closebtn {
text-align: right;
font-size: 20px;
font-weight: bold;
}
.clear {
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="builder" action="" method="POST">
<div class="showbutton" id="link1">
click for first items
</div>
<div id="box1" class="box">
<div class="innerbox">
<div class="closebutton">
<div class="closebtn">X</div>
</div>
- item1.png - item2.png - item3.png
</div>
</div>
<div class="showbutton" id="link1">
click for second items
</div>
<div id="box1" class="box">
<div class="innerbox">
<div class="closebutton">
<div class="closebtn">X</div>
</div>
- item1.png - item2.png - item3.png
</div>
</div>
JSFIDDLE example of my codes: https://jsfiddle.net/j5fqhat6/

You can add data attribute to your kutu div this will help us to identify from where click event has been occurred .So, whenever your gosterButonu is been clicked you can use this data-id to add selected images text to your gosterButonu div.
Demo Code :
$(document).ready(function() {
$(".gosterButonu, .gosterButonu img").click(function(event) {
var butonAdi = $(this).attr('id');
console.log(butonAdi)
//if on click of button you want to remove active class
// $("div[data-id="+butonAdi+"]").find("li").removeClass("active")
$("div[data-id=" + butonAdi + "]").fadeIn(300);
});
$(".kapatButonu").click(function() {
var data_id = $(this).closest(".kutu").data("id");
$("#" + data_id).text($(this).closest(".icKutu").find("li.active").text())
$(".kutu").fadeOut(200);
});
$(".kutu").click(function() {
$(".kutu").fadeOut(200);
});
$(".icKutu").click(function() {
event.preventDefault();
event.stopPropagation();
});
//on click of li
$(".images li").click(function() {
//remove active class from other lis
$(this).closest(".images").find("li").not(this).removeClass("active")
//add active class to li which is clicked
$(this).addClass("active");
})
});
div.gosterButonu {}
div.gosterButonu:hover {}
.kutu {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.icKutu {
overflow: scroll;
width: 80%;
height: 80%;
margin: 5% auto;
background-color: white;
border: 3px solid gray;
padding: 10px;
box-shadow: -10px -10px 25px #ccc;
}
#kutu1 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
#kutu2 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
.kapatButonuCerceve {
width: 20%;
float: right;
cursor: pointer;
}
.kapatButonu {
text-align: right;
font-size: 20px;
font-weight: bold;
}
.clear {
clear: both;
}
ul li {
list-style-type: none
}
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="builder" action="" method="POST">
<div class="gosterButonu" id="link1">
clickfor first items
</div>
<!--added data-id which matched with the div above-->
<div id="kutu1" data-id="link1" class="kutu">
<div class="icKutu">
<div class="kapatButonuCerceve">
<div class="kapatButonu">X</div>
</div>
<div class="clear"></div>
<!--added ul li-->
<ul class="images">
<li>- item1.png</li>
<li> - item2.png </li>
<li>- item3.png</li>
</ul>
</div>
</div>
<div class="gosterButonu" id="link2">
click for second items
</div>
<!--added data-id which matched with the div above-->
<div id="kutu2" data-id="link2" class="kutu">
<div class="icKutu">
<div class="kapatButonuCerceve">
<div class="kapatButonu">X</div>
</div>
<div class="clear"></div>
<ul class="images">
<li>- item1.png</li>
<li> - item2.png </li>
<li>- item3.png</li>
</ul>
</div>
</div>

JQuery & CSS on-screen keyboard not functioning on a remake of HTML

EDIT - Here's what I have: https://codepen.io/anon/pen/wZQjQy
Here's the original: https://codepen.io/anon/pen/YMRLBN
(had to put it on codepen, somehow adding a snippet here doesn't link the css)
I basically copy-pasted a customized on-screen keyboard which worked flawlessly (mostly) but after putting it in a different HTML, it's not working anymore.
keyboard I copied
This is the keyboard, all I really did is replace the characters with Cyrillic and remove the caps, tab, shift and all the "on" spans, since all I really need are the buttons and letters, all capitalized. Now, this worked nicely on my previous build for a page, but the page was inherently flawed by my endless barrage of copy-pasted material and became unfixable at some point, so I started over.
Using some more copy-paste but with Bootstrap now, I built something at least a quarter percent better than my previous mess. But when I imported the on-screen keyboard from the last HTML file, it's now not showing any characters, basically just not working. I really don't know what's going on.
the CSS (I included this because maybe the text is actually being written but just not being shown due to a messy CSS?)
$(function() {
var $write = $('#write'),
shift = false,
capslock = false;
$('#keyboard li').click(function() {
var $this = $(this),
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
// Shift keys
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
$('.letter').toggleClass('uppercase');
$('.symbol span').toggle();
shift = (shift === true) ? false : true;
capslock = false;
return false;
}
// Caps lock
if ($this.hasClass('capslock')) {
$('.letter').toggleClass('uppercase');
capslock = true;
return false;
}
// Delete
if ($this.hasClass('delete')) {
var html = $write.html();
$write.html(html.substr(0, html.length - 1));
return false;
}
// Special characters
if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
if ($this.hasClass('space')) character = ' ';
if ($this.hasClass('tab')) character = "\t";
if ($this.hasClass('return')) character = "\n";
// Uppercase letter
if ($this.hasClass('uppercase')) character = character.toUpperCase();
// Remove shift once a key is clicked.
if (shift === true) {
$('.symbol span').toggle();
if (capslock === false) $('.letter').toggleClass('uppercase');
shift = false;
}
// Add the character
$write.html($write.html() + character);
});
});
html {
width: 100%;
height: auto;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.maincontainer {
background-image: url(b.png);
background-repeat: repeat-y;
background-position: right;
}
/*head*/
.nav-text {
vertical-align: middle;
color: white;
}
.row {
padding: 15px;
display: flex;
justify-content: center;
}
.back-button {
height: 100%;
}
#backer {
float: left;
width: auto;
}
.red {
background-color: darkred;
}
.header {
text-align: center;
color: white;
font-size: 25px;
float: left;
width: 90%;
}
.uk-icon {
color: white;
}
/*main*/
/* Style the tab */
.tab {
width: 100%;
overflow: hidden;
}
/* Style the buttons inside the tab */
.tab button {
width: 50%;
background-color: inherit;
float: left;
border: none;
background-color: darkred;
color: white;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
#tabone {
border-top-left-radius: 5px;
border-right: 1px solid white;
}
#tabtwo {
border-top-right-radius: 5px;
border-left: 1px solid white;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: rgb(80, 3, 3);
}
/* Create an active/current tablink class */
.tab button.active {
background-color: rgb(180, 15, 15);
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
background-color: white;
}
#London {
text-align: center;
}
#searchbutton {
background-color: darkred;
color: white;
border: 0;
border-radius: 5px;
margin-bottom: 15px;
padding-right: 20px;
}
#write {
width: 90%;
height: 300px;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Soyombo_red.svg/300px-Soyombo_red.svg.png) no-repeat scroll 50px 40px;
background-size: 80PX;
padding-left: 50px;
border-radius: 5%;
border: 1px solid black;
margin-bottom: 20px;
margin-top: 20px;
text-align: center;
font-size: 10vh;
}
#London>.container-fluid>h3 {
margin-top: 5%;
font-size: 4vh;
}
#keyboard {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}
#keyboard li {
font-size: 30px;
display: inline-block;
margin: 0 5px 5px 0;
width: 5%;
padding: 0;
height: 70px;
line-height: 70px;
text-align: center;
background: #fff;
border: 1px solid black;
-moz-border-radius: 5px;
-webkit-border-radius: 7PX;
;
}
#keyboard .delete {
width: 120px;
}
.lastitem {
margin-right: 0;
}
.uppercase {
text-transform: uppercase;
}
.on {
display: none;
}
#keyboard li:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;
cursor: pointer;
}
#container.ul {
margin: auto;
float: center;
}
#container-x {
width: 50%;
margin: auto;
}
input[type=submit] {
background: url(http://www.clker.com/cliparts/Y/3/d/w/R/r/search-icon-white-hi.png) no-repeat;
background-size: 25%;
background-position-y: 50%;
background-position-x: 10%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
Payment
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard#latest/build/css/index.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.3/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.3/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.3/js/uikit-icons.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<!-- My CSS & JS-->
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="maincontainer">
<div class="container-fluid red">
<div class="row">
<div class="col-">
<div class="back-button">
<a id="backer" class="uk-button uk-button-default" href="#"><span uk-icon="icon:arrow-left;"></span><span class="nav-text">Эхлэх</span></a>
</div>
</div>
<div class="col-xl">
<div class="header">
Тээврийн хэрэгслийн торгууль төлөх
</div>
</div>
<div class="col-">
<div class="header">
</div>
</div>
</div>
</div>
<div class="uk-container">
<img style="width: auto;" src="images/logo.png">
<div class="box">
<div class="tab">
<button uk-icon="bus" class="tablinks" id="tabone" onclick="openTab(event, 'London')"><img style="width: 8.7%; margin-right: 10px;" src="images/car.png">ТЭЭВРИЙН ХЭРЭГСЭЛ</button>
<button class="tablinks" id="tabtwo" onclick="openTab(event, 'Paris')"><img style="width: 9.3%; margin-right: 10px" src="images/passport.png">ЖОЛООНЫ ҮНЭМЛЭХ</button>
</div>
<div id="London" class="tabcontent">
<div class="container-fluid">
<h3>АВТОМАШИНЫ УЛСЫН ДУГААР</h3>
<div id="input_container">
<input type="text" id="write" maxlength="7" placeholder="UBA 0000">
</div>
</div>
<div>
<input type="submit" value="Хайх" id="searchbutton" class="uk-button uk-button-default" href="#"></input>
</div>
<div style="width:auto;margin: auto;" id="container">
<ul style="display:table; width:100%;" id="keyboard">
<li class="symbol"><span class="off">1</span></li>
<li class="symbol"><span class="off">2</span></li>
<li class="symbol"><span class="off">3</span></li>
<li class="symbol"><span class="off">4</span></li>
<li class="symbol"><span class="off">5</span></li>
<li class="symbol"><span class="off">6</span></li>
<li class="symbol"><span class="off">7</span></li>
<li class="symbol"><span class="off">8</span></li>
<li class="symbol"><span class="off">9</span></li>
<li class="symbol"><span class="off">0</span></li>
<li class="delete"><span class="delete"><img style="width:50%"
src="https://cdn3.iconfinder.com/data/icons/sympletts-part-1/128/backspace-256.png"></span></li>
<br>
<li class="letter">Ф</li>
<li class="letter">Ц</li>
<li class="letter">У</li>
<li class="letter">Ж</li>
<li class="letter">Э</li>
<li class="letter">Н</li>
<li class="letter">Г</li>
<li class="letter">Ш</li>
<li class="letter">Ү</li>
<li class="letter">З</li>
<li class="letter">К</li>
<li class="letter">Ъ</li><br>
<li class="letter">Й</li>
<li class="letter">Ы</li>
<li class="letter">Б</li>
<li class="letter">Ө</li>
<li class="letter">А</li>
<li class="letter">Х</li>
<li class="letter">Р</li>
<li class="letter">О</li>
<li class="letter">Л</li>
<li class="letter">Д</li>
<li class="letter">П</li><br>
<li class="letter">Я</li>
<li class="letter">Ч</li>
<li class="letter">Е</li>
<li class="letter">Ё</li>
<li class="letter">С</li>
<li class="letter">М</li>
<li class="letter">И</li>
<li class="letter">Т</li>
<li class="letter">Ь</li>
<li class="letter">В</li>
<li class="letter">Ю</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</div>
</div>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</div>
</div>
</div>
</body>
</html>
When I click on a li element from the keyboard, it's supposed to call that JS, making magic happen. It ain't doing nothing.
My best guess is the "tabs" not being active on form load, since the only real difference is I used bootstrap tabs on the last one but on this one I copied the W3 schools one.

Change your input area with ID "write" into a textarea.
Replace this line:
<input type="text" required="" id="write" maxlength="7" placeholder="UBA 0000">
with this:
<textarea id="write" rows="6" cols="60" placeholder="UBA 0000"></textarea>
Code Pen shows the changed code.

How to change the content of a div by another div according to a click

I would like to know how to change the content of a div when I click on the menu
Currently it looks like this :
There is my css and html code :
body {
background-color: #555657;
margin: 20px;
}
/* CADRE PARENT */
#global {}
/* CADRE 1 */
#cadre1 {
float: left;
width: 250px;
}
#cadre1 span {
color: #33A7FF;
}
/* CADRE 2 */
#cadre2 {
color: #2370AB;
}
#menu,
#menu ul {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
#menu li {
display: block;
position: relative;
background-color: #2370AB;
}
#menu li ul li {
background-color: white;
text-align: center;
}
#menu ul li {
display: inherit;
border-radius: 0;
}
#menu ul li:hover {
border-radius: 0;
}
#menu ul li:last-child {
border-radius: 0 0 8px 8px;
}
#menu ul {
position: absolute;
z-index: 1000;
max-height: 0;
left: 0;
right: 0;
overflow: hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu li:hover ul {
max-height: 15em;
}
#menu a {
display: block;
padding: 8px 32px;
color: #fff;
}
#menu ul a {
padding: 8px 0;
}
#menu li:hover a,
#menu li li:hover a {
color: #000;
}
/* CADRE 3 */
#div_profil {
display: block;
height: 625px;
background-color: white;
overflow: auto;
}
#div_experience {
display: none;
height: 625px;
background-color: white;
overflow: auto;
}
#div_projet {
display: none;
height: 625px;
background-color: white;
overflow: auto;
}
#div_contact {
display: none;
height: 625px;
background-color: white;
overflow: auto;
}
/* FOOTER */
#footer {
position: fixed;
bottom: 20px;
background-color: #2370AB;
text-align: center;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>portfolio FIEVEZ Clément</title>
<link type="text/css" rel="stylesheet" href="boostrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!--CADRE PRINCIPAL-->
<div class="row" id="global">
<!--INFO BASIQUE-->
<div class="col-sm-3" id="cadre1">
<img src="images/myAvatar.png" alt="avatar" id="avatar" />
<p><span>Nom :</span> FIEVEZ</p>
<p><span>Prénom :</span> Clément (René)</p>
<p><span>Date de naissance / Age :</span> né le 22 janvier 1996, 22ans</p>
<p><span>Lieu de naissance :</span> DENAIN (059)</p>
<p><span>Adresse :</span> 85 rue magenta, 53000 LAVAL</p>
</div>
<!--MENU-->
<div class="col-sm-3" id="cadre2">
<ul id="menu">
<li>Profil
</li>
<li><a id="btn_experience" href="#Experience">Expérience</a>
</li>
<li>Projets
<ul>
<li>Projet 1</li>
<li>Projet 2</li>
<li>Projet 3</li>
<li>projet 4</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
<!--CADRE CHANGEANT-->
<div class="col-sm-5" id="div_profil">
<p>Et Epigonus quidem amictu tenus philosophus, ut apparuit, prece frustra temptata, sulcatis lateribus mortisque metu admoto turpi confessione cogitatorum socium, quae nulla erant, fuisse firmavit cum nec vidisset quicquam nec audisset penitus expers
forensium rerum; Eusebius vero obiecta fidentius negans, suspensus in eodem gradu constantiae stetit latrocinium illud esse, non iudicium clamans.
</p>
</div>
<div class="col-sm-5" id="div_experience">
<p>div experience</p>
</div>
<div class="col-sm-5" id="div_projet">
<p>div projet</p>
</div>
<div class="col-sm-5" id="div_contact">
<p>div contact</p>
</div>
</div>
<footer class="col-sm-12" id="footer">
<div>
<p class="copyright">Tout droit reservé. FIEVEZ Corps.</p>
</div>
</footer>
<script type="text/javascript" src="javascript/script.js"></script>
</body>
</html>
I would like that when I click on one of the tabs of the menu, the div displayed be replaced by another div.
I tried to use some javascript code but this doesn't work.
What should I use to achieve what I want?
Thanks for your reply, have a good day.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>portfolio FIEVEZ Clément</title>
<link type="text/css" rel="stylesheet" href="boostrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css"/>
<style>
body{
background-color: #555657;
margin: 20px;
}
/* CADRE PARENT */
#global{
}
/* CADRE 1 */
#cadre1{
float: left;
width: 250px;
}
#cadre1 span{
color : #33A7FF;
}
/* CADRE 2 */
#cadre2{
color : #2370AB;
}
#menu, #menu ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu li{
display:block;
position:relative;
background-color: #2370AB;
}
#menu li ul li{
background-color: white;
text-align:center;
}
#menu ul li{
display:inherit;
border-radius:0;
}
#menu ul li:hover{
border-radius:0;
}
#menu ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu li:hover ul{
max-height:15em;
}
#menu a{
display:block;
padding:8px 32px;
color:#fff;
}
#menu ul a{
padding:8px 0;
}
#menu li:hover a, #menu li li:hover a{
color:#000;
}
/* CADRE 3 */
#div_profil{
display: block;
height: 625px;
background-color : white;
overflow: auto;
}
#div_experience{
display: none;
height: 625px;
background-color : white;
overflow: auto;
}
#div_projet{
display: none;
height: 625px;
background-color : white;
overflow: auto;
}
#div_contact{
display: none;
height: 625px;
background-color : white;
overflow: auto;
}
/* FOOTER */
#footer{
position: fixed;
bottom: 20px;
background-color: #2370AB;
text-align: center;
}
</style>
</head>
<body>
<!--CADRE PRINCIPAL-->
<div class="row" id="global">
<!--INFO BASIQUE-->
<div class="col-sm-3" id="cadre1">
<img src="images/myAvatar.png" alt="avatar" id="avatar"/>
<p><span>Nom :</span> FIEVEZ</p>
<p><span>Prénom :</span> Clément (René)</p>
<p><span>Date de naissance / Age :</span> né le 22 janvier 1996, 22ans</p>
<p><span>Lieu de naissance :</span> DENAIN (059)</p>
<p><span>Adresse :</span> 85 rue magenta, 53000 LAVAL</p>
</div>
<!--MENU-->
<div class="col-sm-3" id="cadre2">
<ul id="menu">
<li>Profil
</li>
<li><a id="btn_experience" href="#Experience" onclick="div2('div_experience')">Expérience</a>
</li>
<li>Projets
<ul>
<li>Projet 1</li>
<li>Projet 2</li>
<li>Projet 3</li>
<li>projet 4</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
<!--CADRE CHANGEANT-->
<div class="col-sm-5" id="div_profil" >
<p>Et Epigonus quidem amictu tenus philosophus, ut apparuit, prece frustra temptata, sulcatis lateribus mortisque metu admoto turpi confessione cogitatorum socium, quae nulla erant, fuisse firmavit cum nec vidisset quicquam nec audisset penitus expers forensium rerum; Eusebius vero obiecta fidentius negans, suspensus in eodem gradu constantiae stetit latrocinium illud esse, non iudicium clamans.
</p>
</div>
<div class="col-sm-5" id="div_experience">
<p>div experience</p>
</div>
<div class="col-sm-5" id="div_projet">
<p>div projet</p>
</div>
<div class="col-sm-5" id="div_contact">
<p>div contact</p>
</div>
</div>
<footer class="col-sm-12" id="footer">
<div>
<p class="copyright">Tout droit reservé. FIEVEZ Corps.</p>
</div>
</footer>
<script>
function div2(name)
{
document.getElementById("div_profil").style.display="none";
document.getElementById("div_experience").style.display="none";
document.getElementById("div_projet").style.display="none";
document.getElementById("div_contact").style.display="none";
document.getElementById(name).style.display="block";
}
</script>
</body>
</html>

Here a quick answer I made up... jsfiddle
HTML
<a id='1' onclick='myFunction("1");'>Click me 1</a><br/>
<a id='2' onclick='myFunction("2");'>Click me 2</a><br/>
<a id='3' onclick='myFunction("3");'>Click me 3</a><br/>
<a id='4' onclick='myFunction("4");'>Click me 4</a><br/>
<div id='addText'>
</div>
Javascript
<script>
function myFunction(id){
x = document.getElementById("addText");
if(id == 1){
x.innerHTML = 'Hello'
x.style.color = "red";
} else if(id == 2){
x.innerHTML = 'Hi'
x.style.color = "red";
} else if(id ==3){
x.innerHTML = 'Option 3'
x.style.color = "red";
}else{
x.innerHTML = 'Goodbye'
x.style.color = "red";
}
}
</script>
I left all the styling for you, if you dont plan on having many options this solution will work fine.

You almost there, now you need to add some flag related to any container div with any link that should point to corresponding div, so eg:
// if you have you markup html with multiple links try this
<ul>
<li>My Profile</li>
<li>My Experience</li>
</ul>
<div>
<div class="content active" id="div_profile">Show you profile here</div>
<div class="content" id="div_experience">Show your experience here</div>
</div>
So then you need to add some JS code to do the trick, this code will do the trick
var links = document.getElementById('menu').getElementsByTagName('a');
var lastShownDiv = getActiveDiv();
for(var i = 0; i < links.length; i++) {
var currentLink = links[i];
currentLink.addEventListener('click', function(event){
var link = this;
var targetDiv = link.getAttribute('data-url');
if (lastShownDiv) {
removeClassName(lastShownDiv, 'active');
}
lastShownDiv = document.getElementById(targetDiv);
addClassName(lastShownDiv, 'active');
}, false);
}
function addClassName(element, classname) {
if (!element) {
return;
}
var classlists = element.className.split(' ');
classlists.push(classname);
element.className = classlists.join(' ');
}
function removeClassName(element, classname) {
if (!element) {
return;
}
var classlists = element.className.split(' ');
var indexOfClassName = classlists.indexOf(classname);
if (indexOfClassName > -1) {
classlists.splice(indexOfClassName, 1);
}
element.className = classlists.join(' ');
}
function getActiveDiv() {
var actives = document.getElementsByClassName('active');
for(var i = 0; i < actives.length; i++) {
return actives[i];
}
}
body {
background-color: #555657;
margin: 20px;
}
/* CADRE PARENT */
#global {}
/* CADRE 1 */
#cadre1 {
float: left;
width: 250px;
}
#cadre1 span {
color: #33A7FF;
}
/* CADRE 2 */
#cadre2 {
color: #2370AB;
}
#menu,
#menu ul {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
#menu li {
display: block;
position: relative;
background-color: #2370AB;
}
#menu li ul li {
background-color: white;
text-align: center;
}
#menu ul li {
display: inherit;
border-radius: 0;
}
#menu ul li:hover {
border-radius: 0;
}
#menu ul li:last-child {
border-radius: 0 0 8px 8px;
}
#menu ul {
position: absolute;
z-index: 1000;
max-height: 0;
left: 0;
right: 0;
overflow: hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu li:hover ul {
max-height: 15em;
}
#menu a {
display: block;
padding: 8px 32px;
color: #fff;
}
#menu ul a {
padding: 8px 0;
}
#menu li:hover a,
#menu li li:hover a {
color: #000;
}
/* CADRE 3 */
.content {
display: none;
}
.content.active {
display: block;
}
#div_profil {
height: 625px;
background-color: white;
overflow: auto;
}
#div_experience {
height: 625px;
background-color: white;
overflow: auto;
}
#div_projet {
height: 625px;
background-color: white;
overflow: auto;
}
#div_contact {
height: 625px;
background-color: white;
overflow: auto;
}
/* FOOTER */
#footer {
position: fixed;
bottom: 20px;
background-color: #2370AB;
text-align: center;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>portfolio FIEVEZ Clément</title>
<link type="text/css" rel="stylesheet" href="boostrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!--CADRE PRINCIPAL-->
<div class="row" id="global">
<!--INFO BASIQUE-->
<div class="col-sm-3" id="cadre1">
<img src="images/myAvatar.png" alt="avatar" id="avatar" />
<p><span>Nom :</span> FIEVEZ</p>
<p><span>Prénom :</span> Clément (René)</p>
<p><span>Date de naissance / Age :</span> né le 22 janvier 1996, 22ans</p>
<p><span>Lieu de naissance :</span> DENAIN (059)</p>
<p><span>Adresse :</span> 85 rue magenta, 53000 LAVAL</p>
</div>
<!--MENU-->
<div class="col-sm-3" id="cadre2">
<ul id="menu">
<li>Profil
</li>
<li><a id="btn_experience" href="#Experience" data-url="div_experience">Expérience</a>
</li>
<li>Projets
<ul>
<li>Projet 1</li>
<li>Projet 2</li>
<li>Projet 3</li>
<li>projet 4</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
<!--CADRE CHANGEANT-->
<div class="col-sm-5 content active" id="div_profil">
<p>Et Epigonus quidem amictu tenus philosophus, ut apparuit, prece frustra temptata, sulcatis lateribus mortisque metu admoto turpi confessione cogitatorum socium, quae nulla erant, fuisse firmavit cum nec vidisset quicquam nec audisset penitus expers
forensium rerum; Eusebius vero obiecta fidentius negans, suspensus in eodem gradu constantiae stetit latrocinium illud esse, non iudicium clamans.
</p>
</div>
<div class="col-sm-5 content" id="div_experience">
<p>div experience</p>
</div>
<div class="col-sm-5 content" id="div_projet">
<p>div projet</p>
</div>
<div class="col-sm-5 content" id="div_contact">
<p>div contact</p>
</div>
</div>
<footer class="col-sm-12 content" id="footer">
<div>
<p class="copyright">Tout droit reservé. FIEVEZ Corps.</p>
</div>
</footer>
</body>
</html>
The code above, is your code with some updates, I hope this help you to solve your problem.

You could avoid to use Javascript and try a pure css approach using the :target pseudoclass
As you can see, all the content is already inside the document and the main functionality is preserved even if you don't rely on Javascript and /or CSS (without them the page would still work, thanks to the navigation links with a fragment identifier as their href attributes.
Codepen demo
Markup
<nav role="complementary">
<ul role="tablist">
<li role="tab" aria-controls="cnt1" id="tab1" aria-selected="true">
Content 1</li>
<li role="tab" aria-controls="cnt2" id="tab2" aria-selected="false">
Content 2</li>
<li role="tab" aria-controls="cnt3" id="tab3" aria-selected="false">
Content 3</li>
<li role="tab" aria-controls="cnt4" id="tab4" aria-selected="false">
Content 4</li>
</ul>
</nav>
<main>
<section id="cnt1" aria-hidden="false" role="tabpanel" aria-labelledby="tab1">
<h2>Content 1</h2>
<p>This is a lorem ipsum</p>
</section>
<section id="cnt2" aria-hidden="true" role="tabpanel" aria-labelledby="tab2">
<h2>Content 2</h2>
<p>I am the content of link #2</p>
</section>
<section id="cnt3" aria-hidden="true" role="tabpanel" aria-labelledby="tab3">
<h2>Content 3</h2>
<p>Here's another content</p>
</section>
<section id="cnt4" aria-hidden="true" role="tabpanel" aria-labelledby="tab4">
<h2>Content 4</h2>
<p>And that's all folks!</p>
</section>
</main>
CSS (relevant)
body { display: flex; }
main {
flex: 1;
align-self: stretch;
position: relative; }
ul { list-style: none; }
nav { align-self: flex-start; }
[role="tabpanel"] {
position: absolute;
transition: .25s opacity;
background: #fff;
padding: 0 20px;
left: 0; right: 0; top: 0; bottom: 0;
opacity: 0; }
[role="tabpanel"]:first-of-type { opacity: .99; }
[role="tabpanel"]:target { opacity: 1; }
With a simple CSS transition you can switch the content appearance.
Note that I've inserted some role and aria-* attributes: in fact this kind of navigation is really close to a tab/tabpanels widget.
Even if javascript is not used here, it could help a lot anyway to increase the accessibility of the content: e.g. you could attach a transitionend event, detect the visible section (just look at its opacity value) and change some aria-* attributes so to make the life easier for people who use assistive technology.
Javascript
(only for accessibility purpose)
var _gcs = window.getComputedStyle;
var _sections = document.querySelectorAll('[role="tabpanel"]');
var _tabs = document.querySelectorAll('[role="tab"]');
var _setARIAAttributes = () => {
var currentHash;
/* set aria-hidden on panels */
[..._sections].forEach( ( s ) => {
var hidden = +( _gcs( s ).getPropertyValue( 'opacity' ) ) < 1;
s.setAttribute( 'aria-hidden', hidden);
if (!hidden) currentHash = s.id;
});
/* set aria-controls on tabs */
[..._tabs].forEach( ( t ) => {
var selected = t.getAttribute( 'aria-controls' ) === currentHash;
t.setAttribute( 'aria-selected', selected );
});
}
if (!!location.hash) { _setARIAAttributes() }
window.addEventListener('transitionend', () => { _setARIAAttributes(); });