Develop Reference

Multiple instances of "add another photo" button - show div

I have a div that contains a file uploader. Next to this, there is an 'Add Photo' button.
This button once clicked should be hidden, and then reveal another file uploader div with another 'Add Photo' button, which will in turn hide/reveal another button & div upon click.
Anyone able to help? Apparently I cannot just copy the JS and repeat it to affect other ID's
const btn = document.getElementById('btnhide');
btn.addEventListener('click', () => {
btn.style.display = 'none';
// 👇️ show div
const box = document.getElementById('myDIV1');
box.style.display = 'block';
});
<div class="form-content block">
<div class="one">
<label>Photo Upload <em class="tooltip">*<span class="tooltiptext">Required</span></em></label>
</div>
<div class="two">
<input type="file" name="FileUpload" checktype="c1">
<p id="FileUpload_error" style="display: none;">Choose any file for this field.</p>
<p>Please make sure each photo is 20MB or less, thank you. <button id="btnhide" type="button">Add Photo</button></p>
</div></div>
<div class="form-content block" id="myDIV1" style="display:none;">
<div class="one">
<label>Photo Upload <em class="tooltip">*<span class="tooltiptext">Required</span></em></label>
</div>
<div class="two">
<input type="file" name="FileUpload1" checktype="c1">
<p id="FileUpload_error1" style="display: none;">Choose any file for this field.</p>
<p>Please make sure each photo is 20MB or less, thank you. <button id="btnhide1" type="button">Add Photo</button></p>
</div></div>
<div class="form-content block" id="myDIV2" style="display:none;">
<div class="one">
<label>Photo Upload</label>
</div>
<div class="two">
<input type="file" name="FileUpload2" checktype="c1">
<p id="FileUpload2_error" style="display:none;">Choose any file for this field.</p>
<p>Please make sure each photo is 20MB or less, thank you. <button id="btnhide2" type="button">Add Photo</button></p>
</div></div>

From the question comments:
I am following the [HTML] ... supplied ... as I am too inexperienced to
build from scratch.
So...without changing any HTML provided in the question...
...use Javascript to add a click event listener to each "Add Photo" button, that when clicked will navigate to its parent photo upload div, get the next photo upload div, display that, and finally hide itself (button only):
// get all buttons within divs having className "form-content button"
const btns = document.querySelectorAll("div.form-content button");
// interate over resulting button array
btns.forEach((btn, ii) => {
// add a click event listener to each one
btn.addEventListener("click", evt => {
// navigate up to the parent "form-content block" div
// then get the next sibling and assign to photoupload
// DIV.form-content+block > DIV.two > P > BUTTON
const photoupload = evt.target.parentNode.parentNode.parentNode.nextElementSibling;
// if the next sibling is also a "form-content block" div, i.e., this is not the last photoupload,
// display the next "form-content block" div
if ( "form-content block" === photoupload.className ) {
photoupload.style.display = "block";
}
// hide this "Add Photo" button
btn.style.display = "none";
});
// and hide last "Add Photo" button——to not perplex people
if ( btns.length - 1 === ii ) { btn.style.display = "none"; }
});
<div class="form-content block">
<div class="one">
<label>Photo Upload <em class="tooltip">*<span class="tooltiptext">Required</span></em></label>
</div>
<div class="two">
<input type="file" name="FileUpload" checktype="c1">
<p id="FileUpload_error" style="display: none;">Choose any file for this field.</p>
<p>Please make sure each photo is 20MB or less, thank you. <button id="btnhide" type="button">Add Photo</button></p>
</div></div>
<div class="form-content block" id="myDIV1" style="display:none;">
<div class="one">
<label>Photo Upload <em class="tooltip">*<span class="tooltiptext">Required</span></em></label>
</div>
<div class="two">
<input type="file" name="FileUpload1" checktype="c1">
<p id="FileUpload_error1" style="display: none;">Choose any file for this field.</p>
<p>Please make sure each photo is 20MB or less, thank you. <button id="btnhide1" type="button">Add Photo</button></p>
</div></div>
<div class="form-content block" id="myDIV2" style="display:none;">
<div class="one">
<label>Photo Upload</label>
</div>
<div class="two">
<input type="file" name="FileUpload2" checktype="c1">
<p id="FileUpload2_error" style="display:none;">Choose any file for this field.</p>
<p>Please make sure each photo is 20MB or less, thank you. <button id="btnhide2" type="button">Add Photo</button></p>
</div></div>
Using Javascript functions and properties: querySelectorAll(), forEach(),
addEventListener(), event.target, parentNode, nextElementSibling, and className.

Javascript button click listereners didn't redirect me to another page

i'm creating a shop cart and i started with a home page with 3 buttons
I had a little problem with redirecting those buttons to another pages
here's my html and javascript codes
I tried every possibility of redirection on javascript :(
function inscription(){
var myForm = "inscription-form.html";
document.getElementById("btn1f").addEventListener('click' , function () {
window.location.replace(myForm);
});
}
// redirect my second button
var myShop = "http://www.google.com";
document.getElementById("btn2s").addEventListener('click' , function () {
window.location.replace(myShop);
});
// redirect my third button
function redirect(){
var myGoogle = "http://www.google.com";
document.getElementById("btn3g").addEventListener('click' , function () {
window.location.replace(myGoogle);
});
}
<section class="body-container">
<div class="container-item title">
<h1>Who said women need therapy 😒,
<br> <br> We need shopping 🤑
</h1>
</div>
<div class="container-item buttons">
<div class="button-1">
<span>Create an account?</span>
<button type="button" class="btn" id="btn1f">Sign In</button>
</div>
<div class="button-2">
<span>You're a customer 😎</span>
<button type="button" class="btn" id="btn2s">Go Shopping</button>
</div>
<div class="button-3">
<span>Not Interested</span>
<button onclick="redirect()" type="button" class="btn" id="btn3g">Go Back</button>
</div>
</div>
</section>

<!-- html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<script src="js.js"></script>
</head>
<body>
<section class="body-container">
<div class="container-item title">
<h1>Who said women need therapy 😒,
<br> <br> We need shopping 🤑
</h1>
</div>
<div class="container-item buttons">
<div class="button-1">
<span>Create an account?</span>
<button type="button" class="btn" id="btn1f">Sign In</button>
</div>
<div class="button-2">
<span>You're a customer 😎</span>
<button type="button" class="btn" id="btn2s">Go Shopping</button>
</div>
<div class="button-3">
<span>Not Interested</span>
<button type="button" class="btn" id="btn3g">Go Back</button>
</div>
</div>
</section>
</body>
</html>
//below into js.js file
window.onload = function() {
var myShop = "http://www.google.com";
document.getElementById("btn2s").addEventListener('click' , function () {
window.location.href = myShop;
});
var myGoogle = "http://www.google.com";
document.getElementById("btn3g").addEventListener('click' , function () {
window.location.href = myGoogle;
});
var myForm = "inscription-form.html";
document.getElementById("btn1f").addEventListener('click' , function () {
window.location.href = myForm;
});
}

You have warpped the click listeners inside named functions and call those function onclick. So First time you click on a button the listeners is being attached and the second time, the listener will work (however second click also attachs another listener). So omit one of onclick or addEventListener one of them is enough. I prefer deleting named functions and onclick and just attach listeners (They should be attached at the end of document or after window load)
window.onload=function(){
var myForm = "inscription-form.html";
document.getElementById("btn1f").addEventListener('click' , function () {
window.location.replace(myForm);
});
var myShop = "http://www.google.com";
document.getElementById("btn2s").addEventListener('click' , function () {
window.location.replace(myShop);
});
// redirect my third button
var myGoogle = "http://www.google.com";
document.getElementById("btn3g").addEventListener('click' , function () {
window.location.replace(myGoogle);
});
}
<section class="body-container">
<div class="container-item title">
<h1>Who said women need therapy 😒,
<br> <br> We need shopping 🤑
</h1>
</div>
<div class="container-item buttons">
<div class="button-1">
<span>Create an account?</span>
<button type="button" class="btn" id="btn1f">Sign In</button>
</div>
<div class="button-2">
<span>You're a customer 😎</span>
<button type="button" class="btn" id="btn2s">Go Shopping</button>
</div>
<div class="button-3">
<span>Not Interested</span>
<button type="button" class="btn" id="btn3g">Go Back</button>
</div>
</div>
</section>

html file wont read onclick attribute as a string

I am really new to coding and I am following this video tutorial to make a website that displays someone's age in days depending on the prompt input. I am trying to link an onclick attribut to an HTML button that will link to my js function. the problem is that the onclick attribute will not read the js function as a string; thus, not functioning properly. I have tried to google the solution for almost an hour now, but I have not found anything that works. Please help. EDIT: I was told to add parentheses and it still did not work.
html code:
<div class="container1">
<h2>Challenge 1: Your Age in Days</h2>
<div class="flexboxcontainer1">
<div>
<button class="btn btn-primary" onclick="ageindays()">Click Me</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
</div>
<div class="flexboxcontainer1">
<div id="flexboxresult"></div>
</div>
</div>
<script src="project1.js"></script>
</body>
</html>
js code:
function ageindays() {
var birthyear = prompt("What year were you born.. Good friend?");
}

You need to call it with (). So, it will be onclick="ageindays()"
function ageindays() {
var birthyear = prompt("What year were you born.. Good friend?");
}
<div class="container1">
<h2>Challenge 1: Your Age in Days</h2>
<div class="flexboxcontainer1">
<div>
<button class="btn btn-primary" onclick="ageindays()">Click Me</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
</div>
<div class="flexboxcontainer1">
<div id="flexboxresult"></div>
</div>
</div>
<script src="project1.js"></script>

cakephp div and button toggles

Need to solve CakePHP and Script problem
I am using three buttons(let b1,b2 & b3). Three buttons have its own separate div (let d1,d2 & d3)respectively. when I click the b1 ,then d1 should display but other d2 & d3 should hide. When I click the b2 then d2 should display and d3 and d1 should hide. How Should make this work using CakePHP and script in that?
Here is the code that I have tried
<button id="b1"> btn1 </button>
<button id="b2"> btn1 </button>
<button id="b3"> btn1 </button>
<div id="d1" style="display:none"> this is div1 </div>
<div id="d2" style="display:none"> this is div2 </div>
<div id="d3" style="display:none"> this is div2 </div>
// this is script
<?php $this->Html->scriptStart(['block' => 'scriptBottom']); ?>
(function($) {
$(document).ready(function(){
});
$('#b1').click(function () {
$('#d1').show();
$('#d2').hide();
$('#d3).hide();
});
$('#b2').click(function () {
$('#d1').hide();
$('#d2').show();
$('#d3').hide();
});
$('#b3').click(function () {
$('#d1').hide();
$('#d2').hide();
$('#d3').show();
});
}
)( jQuery );
<?php $this->Html->scriptEnd(); ?>

you can try the following:
$('button').click(function(){
var index = $(this).index();//get the position of the current button
$('div').eq(index-1).show();// display the div corresponding to that position ,note: eq start counting from 0
$('div').not(':eq('+(index-1)+')').hide();//hide the other usin not
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button> btn1 </button>
<button> btn1 </button>
<button> btn1 </button>
<div style="display:none"> this is div1 </div>
<div style="display:none"> this is div2 </div>
<div style="display:none"> this is div3 </div>
using ids:
$('button').click(function(){
var id = '#d_'+this.id.split('_')[1];
console.log(id);
$(id).show();
$('div').not(id).hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b_1"> btn1 </button>
<button id="b_2"> btn1 </button>
<button id="b_3"> btn1 </button>
<div id="d_1" style="display:none"> this is div1 </div>
<div id="d_2" style="display:none"> this is div2 </div>
<div id="d_3" style="display:none"> this is div3 </div>

Cipboard is copying the wrong text when click

When I click on the button to copy the first time I get blank
and the second time I get the the last time I click on the button
and on the alert I also get alot of black space before the #emp_ext#.
Why is it reacting this way?
Im only would like it to work on IE9.
<SCRIPT LANGUAGE="JavaScript">
function ClipBoard(areatocopy)
{
alert (holdtext.innerText);
holdtext.innerText = areatocopy.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
}
</SCRIPT>
<TEXTAREA ID="holdtext" STYLE="display:none;">
</TEXTAREA>
<cfif #Left(getAllDetails.emp_ext, 4)# eq '4643'>
<div class="buttons">#emp_ext#
<BUTTON onClick="ClipBoard(z#emp_ext#);"> <img src="copy-icon.png" alt=""/> </BUTTON>
<pre id="z#emp_ext#" style=" display:none">
#emp_ext#
</pre>
</div>
<cfelseif #Left(getAllDetails.emp_ext, 1)# eq '5'>
<div class="buttons">655-emp_ext#
<BUTTON onClick="ClipBoard(z#emp_ext#);"> <img src="copy-icon.png" alt=""/> </BUTTON>
<pre id="z#emp_ext#" style=" display:none">
#emp_ext#
</pre>
</div>
<cfelse #Left(getAllDetails.emp_ext, 1)# eq '6'>
<div class="buttons">#emp_ext#
<BUTTON onClick="ClipBoard(z#emp_ext#);"> <img src="copy-icon.png" alt=""/> </BUTTON>
<pre id="z#emp_ext#" style=" display:none">
#emp_ext#
</pre>
</div>
</cfif>

Temporarily display the textarea before calling execCommand():
function copyText(valueToCopy)
{
var holdtext = document.getElementById("holdtext");
holdtext.innerText = valueToCopy;
var range = holdtext.createTextRange();
holdtext.style.display = "block";
range.execCommand("Copy");
holdtext.style.display = "none";
}
<textarea id="holdtext" style="display:none;"></textarea>
<div class="buttons">
<button onclick="copyText('abc');">⧉ abc</button>
<button onclick="copyText('123');">⧉ 123</button>
</div>
<div>
Paste here to test if it worked:
</div>
<div>
<textarea></textarea>
</div>