HTML中的JS脚本位置

时间:2018-07-22 16:11:12

标签: javascript html css layout

我正在尝试使用HTMl,CSS和香草JS创建一个简单的应用程序。

我有一个数组,并用蚂蚁将其项显示在一个框内,下面有一个按钮,用于获取数组的平均值,该平均值也应出现在按钮下方。

到目前为止,布局非常困难,因为我熟悉核心JS和基本HTML,但是以前从未使用过脚本。无论我做什么,我都无法使按钮显示在数组项的下方和中间。为了使它出现在数组之后,我将flex box应用于主体,因为我不知道如何创建包装的html元素,尽管我已经看到了一些线程,但不知道如何实现它。 / p>

是否有一种简便的方法(避免使用JQuery)?我不能只创建一个包装脚本吗?

到目前为止,这是我的代码:

<!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;
}

抱歉,我还很初级,不知道该怎么做。

3 个答案:

答案 0 :(得分:1)

我正在努力完全理解问题出在哪里,我走了一步,做出了一个jsfiddle,我认为这是您感兴趣的事情。

我觉得问题在于您在文档正文上使用了display: flex;。我将数字包围在一个单独的div元素中,该元素现在已为其分配了弹性显示选项。

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>

按钮和平均值现在显示在数字下方。

这是您要找的吗?

答案 1 :(得分:1)

您应将数组内容放置在span标签内,而不是p标签内。

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/

答案 2 :(得分:1)

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>

也许是这样,您正在尝试实现?

<!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>