Javascript JS脚本在HTML中的位置_Javascript_Html_Css_Layout

Javascript JS脚本在HTML中的位置

javascript html css layout

Javascript JS脚本在HTML中的位置,javascript,html,css,layout,Javascript,Html,Css,Layout,我正在尝试用HTMl、CSS和vanilla JS创建一个简单的应用程序我有一个数组，ant在一个框中显示它的项目，它下面有一个按钮，可以得到数组的平均值，它也应该出现在按钮下面到目前为止，布局非常困难，因为我熟悉核心JS和基本HTML，但以前从未使用过脚本。无论我做什么，我都无法使按钮显示在阵列项目下方和中心。为了让它出现在数组之后，我将flex-box应用于主体，因为我不知道如何创建包装html元素，尽管我看到了一些线程，但不知道如何实现它有没有一种简单的方法（避免JQuery）可以做

我正在尝试用HTMl、CSS和vanilla JS创建一个简单的应用程序

我有一个数组，ant在一个框中显示它的项目，它下面有一个按钮，可以得到数组的平均值，它也应该出现在按钮下面

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

有没有一种简单的方法（避免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;
}


试验
常量数组=[2,3,4,5]；
函数映射（）{
array.map（arrayItem=>{
让elements=document.createElement（'p'）；
elements.innerHTML=arrayItem；
document.body.appendChild（元素）；
元素。类列表。添加（“编号”）；
});
}

平均值

函数平均值（）{
常量数组=[2,3,4,5]
让计数=0
设val=array.reduce（（x，y）=>{
如果（+y）{
计数++
x+=+y
}
返回x
}, 0)
val=val/计数；
document.getElementById（'val'）。innerHTML+=val+'
'；
}
身体{
显示器：flex；
弯曲方向：行反向；
证明内容：周围的空间；
对齐项目：居中；
/*柔性包装：包装*/
}
.数字{
字号：5em；
/*颜色：蓝色*/
/*文本定位：未设置*/
边缘顶部：2米；
}
.按钮{
填充：1em；
边框：2米纯红；
边缘顶部：20em；
职位：继承；
}

对不起，我年纪很小，不知道怎么做。

我正在努力完全理解问题所在，我已经做了一个我认为你感兴趣的决定

我觉得问题在于您使用了

display:flex。我将这些数字包围在一个单独的div
元素中，该元素现在分配了flex显示选项
HTML

const数组=[2,3,4,5]；
函数映射（）{
array.map（arrayItem=>{
让elements=document.createElement（'p'）；
elements.innerHTML=arrayItem；
/*
将数字添加到HTML中的elNumberArray div元素
*/
document.getElementById（“elNumberArray”）.appendChild（元素）；
元素。类列表。添加（“编号”）；
});
document.getElementById（“elAverageButton”）.addEventListener（“单击”，平均值）；
}
函数平均值（）{
常量数组=[2,3,4,5]
让计数=0
设val=array.reduce（（x，y）=>{
如果（+y）{
计数++
x+=+y
}
返回x
}, 0)
val=val/计数；
document.getElementById（'val'）。innerHTML+=val+'
'；
}
document.onload=mapping（）
body{}
/*显示柔体设置现在不再在全身上显示
但设置为elNumberArray div元素*/
#埃尔纳雷{
显示器：flex；
弯曲方向：行反向；
证明内容：周围的空间；
对齐项目：居中；
/*柔性包装：包装*/
}
.数字{
字号：5em；
/*颜色：蓝色*/
/*文本定位：未设置*/
边缘顶部：2米；
}
.按钮{
填充：1em；
边框：2米纯红；
边缘顶部：20em；
职位：继承；
}


平均值

您应该将数组内容放在span
标记中，而不是p
标记中

正文{
显示器：flex；
对齐项目：居中；
/*柔性包装：包装*/
}
.数字{
字号：5em；
}
.按钮{
填充：1em；
边框：2米纯红；
边缘顶部：20em；
}
.集装箱{
}

试验
常量数组=[2,3,4,5]；
函数映射（）{
array.map（arrayItem=>{
让elements=document.createElement（'span'）；
elements.innerHTML=arrayItem；
document.getElementById（“数字”）.appendChild（元素）；
元素。类列表。添加（“编号”）；
});
}

平均值

函数平均值（）{
常量数组=[2,3,4,5]
让计数=0
设val=array.reduce（（x，y）=>{
如果（+y）{
计数++
x+=+y
}
返回x
}, 0)
val=val/计数；
document.getElementById（'val'）。innerHTML+=val+'
'；
}

const数组=[2,3,4,5]；
让arrayContainer=document.getElementById（'arrayContainer'）；
（函数映射（）{
array.map（arrayItem=>{
let element=document.createElement（'p'）；
element.innerHTML=arrayItem；
元素。类列表。添加（“编号”）；
arrayContainer.appendChild（元素）；
});
})();
函数平均值（）{
让计数=0
设val=array.reduce（（x，y）=>{
如果（+y）{
计数++
x+=+y
}
返回x
}, 0)
val=val/计数；
document.getElementById（'val'）。innerHTML+=val+'
'；
}
.container{
宽度：50%；
保证金：0自动；
文本对齐：居中；
转换：翻译（-50%，-50%）；
位置：绝对位置；
最高：50%；
左：50%；
}
#阵列容器{
显示器：flex；
对正内容：空间均匀；
边框：1px实心；
}
.数字{
最小宽度：20px；
}
.按钮{
利润率：20px 0px；
}

平均值
请添加一些详细信息。您的控制台中有哪些错误？上面的代码会导致什么行为？可能以代码笔为例。您的CSS位置不正确。我在控制台中没有错误，只是无法使按钮框低于数组项，而平均值低于按钮。这可能会有帮助：这完全是我所需要的，非常感谢。这是我不知道的document.getElementById（“elAverageButton”）.a