JS Script position in HTML

Question

I'm trying to create a simple app with HTMl, CSS and vanilla JS.

I've got an array, and ant to display its items in a box, with a button below it that gets the average of the array, which should also appear below the button.

So far, the layout has been very difficult, as I'm familiar with core JS and basic HTML, but never worked with scripts before. I can't make the button to be displayed below the array items and in the centre, no matter what I do. For it to appear after the array, I've applied flex box to the body, because I don't know how to create a wrapping html element, although I've seen some threads, don't know how to implement it.

Is there an easy way (avoiding JQuery) of doing this? Can't I just create a wrapping the script?

This is my code so far:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Test</title>
</head>

<body onload="mapping()">
  <script>
    const array = [2, 3, 4, 5];
    function mapping() {
      array.map(arrayItem => {

        let elements = document.createElement('p');
        elements.innerHTML = arrayItem;
        document.body.appendChild(elements);
        elements.classList.add("numbers");

      });
    }
  </script>


  <div class='container'>
    <div class='button'>
      <p>
        <button onClick="average()">Average</button>
      </p>
    </div>
    <div id='val'></div>
  </div>



  <script>
    function average() {
      const array = [2, 3, 4, 5]
      let count = 0
      let val = array.reduce((x, y) => {
        if (+y) {
          count++
          x += +y
        }
        return x
      }, 0)
      val = val / count;
      document.getElementById('val').innerHTML += val + '<br/>';
    }
  </script>

</body>


</html>



body {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  align-items: center;
  /* flex-wrap: wrap; */
}

.numbers {
  font-size: 5em;
  /* color: blue; */
  /* text-orientation: unset; */
  margin-top: 2em;
}

.button {
  padding: 1em;
  border: .2em solid red;
  margin-top: 20em;
  position: inherit;
}

Sorry I'm very junior and can't figure out how to do it.

Please add some details. What errors are in your console? What behavior are you getting with the above code? Maybe make a codepen as an example. — Matt
– Matt, Commented Jul 22, 2018 at 16:14
I have no errors in the console, just cannot make the button box to be below the array items, and the average below the button. This might help: codepen.io/anon/pen/Owpyoy — VisualXZ
– VisualXZ, Commented Jul 22, 2018 at 16:18

Lennart · Accepted Answer · 2018-07-22 16:27:43Z

1

I'm struggling to fully understand where the issue is, I've gone and made a jsfiddle that I think does what you're interested in.

I have a feeling the problem is the fact that you use display: flex; on the body of the document. I've surrounded the numbers in a separate div element that now has the flex-display options assigned to it.

HTML

const array = [2, 3, 4, 5];

function mapping() {
  array.map(arrayItem => {
    let elements = document.createElement('p');
    elements.innerHTML = arrayItem;
    /*
      Adding the numbers to the elNumberArray div element in the HTML
    */
    document.getElementById("elNumberArray").appendChild(elements);
    elements.classList.add("numbers");

  });
  document.getElementById("elAverageButton").addEventListener("click", average);
}

function average() {
  const array = [2, 3, 4, 5]
  let count = 0
  let val = array.reduce((x, y) => {
    if (+y) {
      count++
      x += +y
    }
    return x
  }, 0)
  val = val / count;
  document.getElementById('val').innerHTML += val + '<br/>';
}

document.onload = mapping();

body {}


/* display-flex settings are now no longer on the whole body
but set for elNumberArray div element */

#elNumberArray {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  align-items: center;
  /* flex-wrap: wrap; */
}

.numbers {
  font-size: 5em;
  /* color: blue; */
  /* text-orientation: unset; */
  margin-top: 2em;
}

.button {
  padding: 1em;
  border: .2em solid red;
  margin-top: 20em;
  position: inherit;
}

<div id="elNumberArray">
  <!--Numbers are now inserted here-->
</div>
<div class='container'>
  <div class='button'>
    <p>
      <button id="elAverageButton">Average</button>
    </p>
  </div>
  <div id='val'></div>
</div>

The button and average are now displayed below the numbers.

Is this what you were looking for?

answered Jul 22, 2018 at 16:27

Lennart

1,5485 gold badges20 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

VisualXZ Over a year ago

It is totally what I needed, thank you very much. This is what I didn't know document.getElementById("elAverageButton").addEventListener("click", average);

Lennart Over a year ago

Awesome, no worries. Happy to have been able to help :)

user10108359 · Accepted Answer · 2018-07-22 16:31:22Z

You should place the array contents inside span tags instead of p tags.

body {
  display: flex;

  align-items: center;
  /* flex-wrap: wrap; */
}

.numbers {
  font-size: 5em;
}

.button {
  padding: 1em;
  border: .2em solid red;
  margin-top: 20em;
}
.container{

}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Test</title>
</head>

<body onload="mapping()">
  <script>
    const array = [2, 3, 4, 5];
    function mapping() {
      array.map(arrayItem => {

        let elements = document.createElement('span');
        elements.innerHTML = arrayItem;
        document.getElementById("numbers").appendChild(elements);
        elements.classList.add("numbers");

      });
    }
  </script>
 <span id="numbers" style="margin: 20px;">
 
 </span>

  <div class='container'>
    <div class='button'>
      <p>
        <button onClick="average()">Average</button>
      </p>
    </div>
    <div id='val'></div>
  </div>



  <script>
    function average() {
      const array = [2, 3, 4, 5]
      let count = 0
      let val = array.reduce((x, y) => {
        if (+y) {
          count++
          x += +y
        }
        return x
      }, 0)
      val = val / count;
      document.getElementById('val').innerHTML += val + '<br/>';
    }
  </script>

</body>


</html>

JSFiddle: http://jsfiddle.net/kru10xgd/11/

Anshul Bansal · Accepted Answer · 2018-07-22 16:31:37Z

const array = [2, 3, 4, 5];
let arrayContainer = document.getElementById('arrayContainer');
(function mapping() {
  array.map(arrayItem => {
    let element = document.createElement('p');
    element.innerHTML = arrayItem;
    element.classList.add("numbers");
    arrayContainer.appendChild(element);
  });
})();

function average() {
  let count = 0
  let val = array.reduce((x, y) => {
    if (+y) {
      count++
      x += +y
    }
    return x
  }, 0)
  val = val / count;
  document.getElementById('val').innerHTML += val + '<br/>';
}

.container {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

#arrayContainer {
  display: flex;
  justify-content: space-evenly;
  border: 1px solid;
}

.numbers {
  min-width: 20px;
}

.button {
  margin: 20px 0px;
}

<div class='container'>
  <div id="arrayContainer"></div>
  <div class='button'>
    <button onClick="average()">Average</button>
  </div>
  <div id='val'></div>
</div>

Something like this maybe , you are trying to achieve?

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <!-- // <link rel="stylesheet" href="style.css"> -->
      <title>Test</title>
      <style>
         .container{
         width: 50%;
         margin: 0 auto;
         text-align: center;
         transform: translate(-50%,-50%);
         position: absolute;
         top: 50%;
         left: 50%;
         }
         #arrayContainer{
         display: flex;
         justify-content: space-evenly;
         border: 1px solid;
         }
         .numbers {
         min-width: 20px;
         }
         .button {
         margin: 20px 0px;
         }
      </style>
   </head>
   <body>
      <div class='container'>
         <div id="arrayContainer"></div>
         <div class='button'>
            <button onClick="average()">Average</button>
         </div>
         <div id='val'></div>
      </div>
      <script>
         const array = [2, 3, 4, 5];
         let arrayContainer = document.getElementById('arrayContainer');
         (function mapping() {
           array.map(arrayItem => {
             let element = document.createElement('p');
             element.innerHTML = arrayItem;
             element.classList.add("numbers");
             arrayContainer.appendChild(element);
           });
         })();
         function average() {
           let count = 0
           let val = array.reduce((x, y) => {
             if (+y) {
               count++
               x += +y
             }
             return x
           }, 0)
           val = val / count;
           document.getElementById('val').innerHTML += val + '<br/>';
         }
      </script>
   </body>
</html>

Collectives™ on Stack Overflow

JS Script position in HTML

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related