0
私はプロジェクトをいくつかのボタンで構成しようとしていますが、それらをクリックすると値が配列（custo）にプッシュされます。私はその配列のすべての値を追加し、変数に格納する必要がありますが、私は正しく行うことはできません...私は（ "*"）に参加しようとしました。その値を変数に入れた後、ユーザーが入力に与える値を乗算する必要があります...さらに、ボタンのCalcularがクリックされると最終結果が表示され、リセットボタンがクリックされると、結果（resultado）でdivをきれいにし、配列をリセットします。ここで私が得たもののためのコードは次のとおりです。Javascript - 配列とより多くの計算を持つ数学
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="inner-cont">
<div id="resultado"></div>
<div class="bloco-estilo" id="penteado">
<p>Penteado</p>
</div>
<div class="bloco-estilo" id="pintar">
<p>Pintar</p>
</div>
<div class="bloco-estilo" id="pintar-opt">
<ul class="cores">
<li id="cor_verm">Vermelho</li>
<li id="cor_loiro">Loiro</li>
<li id="cor_cast" cast>Castanho</li>
</ul>
</div>
<div class="bloco-estilo" id="acabamento">
<p>Acabamento</p>
</div>
<div class="lucro">
<div class="lucro-dir">
<p>Introduza o valor percentual de lucro</p>
<input type="text" maxlength="2">
<p>%</p>
</div>
<div class="lucro-esq">
<button id="reset">Reset</button>
<button id="calc">Calcular</button>
</div>
</div>
</div>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script src="function.js"></script>
</body>
</html>
CSS：
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
ul {
list-style: none;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
ul li {
display: inline;
padding: 0 40px;
box-sizing: border-box;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.inner-cont {
width: 50%;
height: 80%;
background-color: #f2ce9e;
position: relative;
}
#resultado {
width: 100%;
height: 100px;
background-color: snow;
box-sizing: border-box;
border: 2px dashed #e39835;
}
.bloco-estilo {
width: 100%;
height: 80px;
background-color: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 20pt;
color: navy;
font-family: Arial;
margin-bottom: 10px;
box-sizing: border-box;
cursor: pointer;
transition: all 500ms ease;
}
ul li:hover {
background-color: #8b1555;
color: white;
}
.bloco-estilo:hover {
background-color: deeppink;
color: white;
}
.lucro {
width: 100%;
height: 100px;
font-size: 12pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
}
.lucro-dir {
width: 50%;
height: 100px;
font-size: 16pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
box-sizing: border-box;
}
.lucro-esq {
width: 50%;
height: 100px;
font-size: 12pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: flex-end;
flex-direction: column;
}
#reset {
width: 50%;
height: 50%;
background-color: red;
border: none;
color: white;
font-size: 15pt;
float: left;
}
#calc {
width: 50%;
height: 50%;
background-color: green;
border: none;
color: white;
font-size: 15pt;
float: left;
}
input {
width: 40px;
height: 30px;
margin: 0 10px;
font-size: 12pt;
text-align: center;
font-weight: bolder;
}
#pintar-opt {
display: none;
}
JS（iもjqueryのを使用しています）：
$('#pintar').click(function() {
$('#pintar-opt').slideToggle(0);
});
var p1, p2, p2_1, p2_2, p2_3, a;
p1 = 10; //penteado
p2 = 0; // pintar
p2_1 = 3; //opt cor 1
p2_2 = 5; //opt cor 2
p2_3 = 7; //opt cor 3
a = 6; //acabamento
var custo = [];
$('#penteado').click(function() {
custo.push(p1);
});
$('#pintar').click(function() {
custo.push(p2);
});
$('#cor_verm').click(function() {
custo.push(p2_1);
});
$('#cor_loiro').click(function() {
custo.push(p2_2);
});
$('#cor_cast').click(function() {
custo.push(p2_3);
});
$('#acabamento').click(function() {
custo.push(p2_3);
});
var preco = custo.join(" * ");
誰にappretiated非常者私を助けようとする！また、適切に反応しないので、あなたがデザインに何が間違っているかを見ることができれば素晴らしいでしょう...
。 – Sam0