0

Its a project for adding pictures and i want to create more picture loading boxes before the add box when the button with 'add' class is pressed. When the button is pressed the console log works but the change of innerHTML doesnt. As i am a beginner i would appriciate any comments that can improve my work as im trying to learn and grow everyday. thank you!

here is the html, css and js:

const container = document.getElementsByClassName('container')
const add = document.getElementsByClassName('add')


function addMore(){
    container.innerHTML += `
    <div class="box upload">
        <div class="cir">
            <i class="fa-solid fa-upload fa-2xl" style="color: #ffffff;"></i>
        </div>
    </div>

    `
    console.log('done')
}
body {
    background: rgb(112,50,154);
    background: linear-gradient(158deg, rgba(112,50,154,1) 9%, rgba(29,126,253,1) 100%);
    margin: 0;
    padding: 0;
    display: flex;
}

.container {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
}

.box{
    background-color: rgb(100, 0, 100);
    border: 1px solid rgb(183, 79, 183);
    border-radius: 10px;
    width: 157px;
    height: 200px;
    margin: 10px 10px 10px 10px ;
    display: flex;
    justify-content: center;
    align-items: center;

}

.add {
    opacity: 70%;
}

.cir {
    background-color: rgba(250, 235, 215, 0.408);
    width: 100px;
    height: 100px;
    border-radius: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App</title>
    <script src="https://kit.fontawesome.com/9f2b728e62.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="box upload">
            <div class="cir">
                <i class="fa-solid fa-upload fa-2xl" style="color: #ffffff;"></i>
            </div>
        </div>
        <button class="box add" onclick="addMore()">
            <div class="cir">
                <i class="fa-solid fa-plus fa-fade fa-2xl" style="color: #ffffff;"></i>
            </div>
        </button>
    </div>
</body>
</html>
Zketra
  • 19
  • 5

2 Answers2

1

getElementsByClassName returns an array like object

more info about it here getElementsByClassName

You have to access the element by its index so add [0] to it since you only have one element with that class so you have to access that element like this

const container = document.getElementsByClassName('container')[0]

or in this case is better if you use querySelector instead

const container = document.querySelector('.container')

Edit: Edited the HTML to have your button at the beggining and your first div right next to it (it looks better)

const container = document.querySelector('.container')
const add = document.querySelector('.add')


function addMore() {
  container.innerHTML += `
    <div class="box upload">
        <div class="cir">
            <i class="fa-solid fa-upload fa-2xl" style="color: #ffffff;"></i>
        </div>
    </div>

    `
  console.log('done')
}
body {
  background: rgb(112, 50, 154);
  background: linear-gradient(158deg, rgba(112, 50, 154, 1) 9%, rgba(29, 126, 253, 1) 100%);
  margin: 0;
  padding: 0;
  display: flex;
}

.container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: wrap;
}

.box {
  background-color: rgb(100, 0, 100);
  border: 1px solid rgb(183, 79, 183);
  border-radius: 10px;
  width: 157px;
  height: 200px;
  margin: 10px 10px 10px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.add {
  opacity: 70%;
}

.cir {
  background-color: rgba(250, 235, 215, 0.408);
  width: 100px;
  height: 100px;
  border-radius: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>App</title>
  <script src="https://kit.fontawesome.com/9f2b728e62.js" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <button class="box add" onclick="addMore()">
        <div class="cir">
          <i class="fa-solid fa-plus fa-fade fa-2xl" style="color: #ffffff;"></i>
        </div>
      </button>
    <div class="box upload">
      <div class="cir">
        <i class="fa-solid fa-upload fa-2xl" style="color: #ffffff;"></i>
      </div>
    </div>
  </div>
</body>

</html>
Chris G
  • 1,598
  • 1
  • 6
  • 18
  • Your answer is correct, but doesn't include the warning to [not use `.getElementsByClassName()`](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) in any case and instead use `.querySelector()` or `.querySelectorAll()`. – Scott Marcus Jun 16 '23 at 19:42
  • makes sense, no point using `getElementsByClassName` when he just wants the one and only element present in the document, edited my answer and used `querySelector` on the `add` button as well – Chris G Jun 16 '23 at 19:49
  • It's actually a bit more than just needing one element. `.getElementsByClassName()` is a legacy API that has performance implications and really should be avoided all the time. – Scott Marcus Jun 16 '23 at 20:13
0

document.getElementsByClassName() returns an HTMLCollection which is accessed like an array. You want to modify the first element in that array like this:

function addMore(){
    container[0].innerHTML += `
    <div class="box upload">
        <div class="cir">
            <i class="fa-solid fa-upload fa-2xl" style="color: #ffffff;"></i>
        </div>
    </div>

    `
    console.log('done')
}
Chipster
  • 117
  • 7