javascript - 如何重构包含 innerHTML 的 JavaScript 函数？
问题描述
const box1 = document.getElementById('box1')
const box2 = document.getElementById('box2')
const box3 = document.getElementById('box3')
const box1__input = document.getElementsByClassName('box1__input')
const box2__input = document.getElementsByClassName('box2__input')
const box3__input = document.getElementsByClassName('box3__input')
const box1__flexbasis = document.getElementsByClassName('box1__flexbasis')
const box2__flexbasis = document.getElementsByClassName('box2__flexbasis')
const box3__flexbasis = document.getElementsByClassName('box3__flexbasis')
const box1__flexshrink = document.getElementsByClassName('box1__flexshrink')
const box2__flexshrink = document.getElementsByClassName('box2__flexshrink')
const box3__flexshrink = document.getElementsByClassName('box3__flexshrink')
const box1__upArrow = document.getElementById('box1__upArrow')
const container = document.getElementById('container')
const form__form1 = document.getElementById('form1')
box1.style.flexGrow = "1"
flexGrowIncrease =(box) => {
// console.log(parseInt(box1.style.flexGrow) + 1)
box.style.flexGrow = (parseInt(box.style.flexGrow) +1).toString()
reportwidth()
}
flexGrowDecrease =(box) => {
// console.log(parseInt(box1.style.flexGrow) + 1)
box.style.flexGrow = (parseInt(box.style.flexGrow) -1).toString()
reportwidth()
}
getInputValue = ()=> {
box1.style.flexGrow= box1__input[0].value
box1.style.flexShrink= box1__flexshrink[0].value
box1.style.flexBasis = box1__flexbasis[0].value +'px'
box2.style.flexGrow= box2__input[0].value
box2.style.flexShrink= box2__flexshrink[0].value
box2.style.flexBasis = box2__flexbasis[0].value +'px'
box3.style.flexGrow= box3__input[0].value
box3.style.flexShrink= box3__flexshrink[0].value
box3.style.flexBasis= box3__flexbasis[0].value +'px'
reportwidth()
}
form__form1.addEventListener('change', ()=>getInputValue())
// changeDisplay =()=> {
// container.style.flexDirection = 'column'
// }
reloadPage = () => window.location.reload();
function reportwidth() {
box1.innerHTML = `<div>
<div style="font-size:30px;"><strong>BOX 1</div></strong><br>
width : ${box1.clientWidth} px <br><br>
flex-grow : ${box1.style.flexGrow || 1 }<br>
flex-shrink : ${box1__flexshrink[0].value || 1 }<br>
flex-basis : ${box1__flexbasis[0].value || 0}px<br><br>
<b>shorthand</b><br>
flex : ${box1.style.flexGrow || 1 } ${box1__flexshrink[0].value || 1 } ${box1__flexbasis[0].value || 0}px
</div>` ;
box2.innerHTML = `<div>
<div style="font-size:30px;"><strong>BOX 2</div></strong><br>
width : ${box2.clientWidth} px <br><br>
flex-grow : ${box2__input[0].value || 1 }<br>
flex-shrink : ${box2__flexshrink[0].value || 1 }<br>
flex-basis : ${box2__flexbasis[0].value || 0} px<br><br>
<b>shorthand</b><br>
flex : ${box2__input[0].value || 1 } ${box2__flexshrink[0].value || 1 } ${box2__flexbasis[0].value || 0}px
</div>` ;
box3.innerHTML = `<div>
<div style="font-size:30px;"><strong>BOX 3</div></strong><br>
width : ${box3.clientWidth} px <br><br>
flex-grow : ${box3__input[0].value || 1 }<br>
flex-shrink : ${box3__flexshrink[0].value || 1 }<br>
flex-basis : ${box3__flexbasis[0].value || 0} px<br><br>
<b>shorthand</b><br>
flex : ${box3__input[0].value || 1 } ${box3__flexshrink[0].value || 1 } ${box3__flexbasis[0].value || 0}px
</div>` ;
}
window.onresize = reportwidth;
window.onload = ()=> {
reportwidth();
}
var element = document.getElementById('container');
var resizer = document.createElement('div');
resizer.style.width = '15px';
resizer.style.height = '15px';
resizer.style.background = '#e7512b';
resizer.style.position = 'absolute';
resizer.style.right = 0;
resizer.style.bottom = 0;
resizer.style.cursor = 'se-resize';
//Append Child to Element
resizer.addEventListener('mousedown', initResize, false);
element.appendChild(resizer);
//Window funtion mousemove & mouseup
function initResize(e) {
window.addEventListener('mousemove', Resize, false);
window.addEventListener('mouseup', stopResize, false);
}
//resize the element
function Resize(e) {
element.style.width = (e.clientX - element.offsetLeft) + 'px';
element.style.height = (e.clientY - element.offsetTop) + 'px';
reportwidth()
}
//on mouseup remove windows functions mousemove & mouseup
function stopResize(e) {
window.removeEventListener('mousemove', Resize, false);
window.removeEventListener('mouseup', stopResize, false);
}body{
--font-ubuntu : 'Ubuntu', sans-serif;
background-color: #fefae0;
}
.main {
font-family: var(--font-ubuntu);
margin : 0 auto;
/* display : flex;
direction: column;
flex-wrap: wrap;
justify-content: center; */
}
.container {
margin : 3% auto;
width : 80vw;
height: 40vh;
background-color: #023047;
display: flex;
justify-content: center;
flex-wrap: wrap;
padding : 3%;
position : relative;
}
.resizer {
width : 20x;
height: 20px;
color: #fefae0;
position : absolute;
/* font-weight : bold; */
right : 0 px;
top : 80px;
}
.flexInputs{
margin: 1% auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
#form1 {
/* margin : 0 auto; */
width : 590px;
padding : 2%;
border : 1px solid black;
/* position : absolute; */
}
/* .Definition__flexgrow{
margin-top: 3%;
width : 590px;
padding : 3%;
border : 1px solid black;
} */
#box1, #box2, #box3 {
margin : 0 1%;
/* text-align: center; */
/* font-weight: bold; */
color: white;
margin :1%;
display : flex;
justify-content: center;
align-items: center;
letter-spacing: 0.05em;
font-size : 14px;
background-color: blueviolet;
background: linear-gradient(140deg, #e7512b, #f4a261);
width : 50px;
flex : 1;
}
input {
width : 40px;
margin-right:20px;
}
button {
background-color: #023047;
color : white;
border : none;
margin-top : 1%;
padding:1%;
}
button:hover {
background: linear-gradient(140deg, #e7512b, #f4a261);
border : 1px solid #023047
}
h2 {
/* font-size : 1.5rem; */
display : inline;
margin-right: 1%;
}
h1 {
font-size: 1.5rem;
} .buttonArrow {
padding : 1%;
border-radius : 30px;
}
.buttonArrow:hover {
border : none;
}
.disable-select {
user-select: none; /* supported by Chrome and Opera */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='./index.js' defer></script>
<script src='./drag_elements.js' defer></script>
<title>Document</title>
</head>
<body>
<main class="main" id="main">
<div class="container disable-select" id="container">
<div id="box1" > </div>
<div id="box2"></div>
<div id="box3"></div>
</div>
<div class="flexInputs">
<form id="form1" >
<h2>BOX 1</h2>
<label for="flexWidth">flexGrow :</label>
<input type="number" min="0" name="flexWidth" class="box1__input" value="1" >
<!-- <button id="box1__upArrow" onClick="flexGrowIncrease(box1); return false;" class="buttonArrow">+</button>
<button id="box1__downArrow" onClick="flexGrowDecrease(box1); return false;" class="buttonArrow">-</button> -->
<label for="flexShrink">flexShrink :</label>
<input type="number" min="0" name="flexShrink" class="box1__flexshrink" value="1" >
<label for="flexbasis">flex-basis :</label>
<input type="number" min="0" name="flexbasis" class="box1__flexbasis" value="0">
<br>
<h2>BOX 2</h2>
<label for="flexWidth">flexGrow :</label>
<input type="number" min="0" name="flexWidth" class="box2__input" value="1" >
<label for="flexShrink">flexShrink :</label>
<input type="number" min="0" name="flexShrink" class="box2__flexshrink" value="1" >
<label for="flexbasis">flex-basis :</label>
<input type="number" min="0" name="flexbasis" class="box2__flexbasis" value="0">
<br>
<h2>BOX 3</h2>
<label for="flexWidth">flexGrow :</label>
<input type="number" min="0" name="flexWidth" class="box3__input" value="1" >
<label for="flexShrink">flexShrink :</label>
<input type="number" min="0" name="flexShrink" class="box3__flexshrink" value="1">
<label for="flexbasis">flex-basis :</label>
<input type="number" min="0" name="flexbasis" class="box3__flexbasis" value="0">
</form>
<!-- <div class="Definition__flexgrow"> <h1>La propriété flex-grow</h1>
La propriété flex-grow permet de répartir l'espace disponible en « parts ».
Si, pour le premier élément, on indique flex-grow avec une valeur de 2 et,
pour les autres éléments, flex-grow avec une valeur de 1, deux « parts » de l'espace
disponible seront données au premier élément .</div>
<div class="Definition__flexgrow"> <h1>La propriété flex-shrink</h1>
La propriété flex-grow permet de gérer la façon dont l'espace est ajouté sur
l'axe principal. La propriété flex-shrink permet quant à elle de contrôler
la façon dont l'espace est réduit.</div> -->
<!-- <button onclick="getInputValue();">OK</button> -->
<!-- <button onclick="changeDisplay();">SWITH ROW / COLUMN</button> -->
<button onclick="reloadPage();">RESET</button>
</div>
</main>
</body>
</html>A 有一个 JavaScript 函数，它处理三个不同框内的文本。这些框非常相似，文本插入框中的方式相同。现在功能是这样的：
function reportwidth() {
box1.innerHTML = `<div>
<div style="font-size:30px;"><strong>BOX 1</div></strong><br>
width : ${box1.clientWidth} px <br><br>
flex-grow : ${box1.style.flexGrow || 1 }<br>
flex-shrink : ${box1__flexshrink[0].value || 1 }<br>
flex-basis : ${box1__flexbasis[0].value || 0}px<br><br>
<b>shorthand</b><br>
flex : ${box1.style.flexGrow || 1 } ${box1__flexshrink[0].value || 1 } ${box1__flexbasis[0].value || 0}px
</div>` ;
box2.innerHTML = `<div>
<div style="font-size:30px;"><strong>BOX 2</div></strong><br>
width : ${box2.clientWidth} px <br><br>
flex-grow : ${box2__input[0].value || 1 }<br>
flex-shrink : ${box2__flexshrink[0].value || 1 }<br>
flex-basis : ${box2__flexbasis[0].value || 0} px<br><br>
<b>shorthand</b><br>
flex : ${box2__input[0].value || 1 } ${box2__flexshrink[0].value || 1 } ${box2__flexbasis[0].value || 0}px
</div>` ;
box3.innerHTML = `<div>
<div style="font-size:30px;"><strong>BOX 3</div></strong><br>
width : ${box3.clientWidth} px <br><br>
flex-grow : ${box3__input[0].value || 1 }<br>
flex-shrink : ${box3__flexshrink[0].value || 1 }<br>
flex-basis : ${box3__flexbasis[0].value || 0} px<br><br>
<b>shorthand</b><br>
flex : ${box3__input[0].value || 1 } ${box3__flexshrink[0].value || 1 } ${box3__flexbasis[0].value || 0}px
</div>` ;
}
所以我的赌注是将box参数传递给函数，这将是这样的：
function reportwidth(box) {}
但我无法完成这项工作，因为如果我这样做：
flex : ${box.style.flexGrow || 1 }
代替
flex : ${box1.style.flexGrow || 1 }
它只是不起作用......
解决方案
推荐阅读
- amazon-web-services - 使用 AWS 的 Terraform
- laravel - Jetstream 安装失败：无法解析为可安装的软件包集
- python - 未能部署 Heroku 应用程序。错误：命令出错，退出状态为 1：/app/.heroku/python/bin/python -u -c 'import sys, setuptools, tokenize;
- python - python中列表字典的概率
- regex - 如果我尝试将它与 $1、$2 等反向引用一起使用，则字符串在 RewriteRule 中重复 20 次。诡异的。为什么？
- vba - VBA：为什么 For Each 循环比 For 循环快？
- c++ - 2D 矢量调整大小需要对象的默认构造函数
- excel - 获取 Gmail 中收件箱邮件的链接
- reactjs - 是否反应原生模板支持而不使用像反应 js 那样的打字稿？
- python - 如何在不使用 PyInputPlus 的情况下将计时器添加到 Python 循环（无异步或线程）