Как сделать все кнопки JavaScript одинакового размера?

Как сделать все кнопки JavaScript одинакового размера? Я делаю калькулятор, и это выглядит отвратительно, если все кнопки не имеют одинакового размера. Я пытался сделать это в течение как минимум часа, я не мог найти ни одной публикации или учебника StakOverFlow, в котором объяснялось, как это сделать.Как сделать все кнопки JavaScript одинакового размера?

Мой код:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Calc</title> 
 
<style> 
 
.calc {border: groove 6px; margin-left: 530px; margin-right: 530px; padding-top: 10px; padding-bottom: 10px; height: 200px;} 
 

 
input {text-align: center;height: 30px;} 
 

 
.results {padding-bottom: 7px;} 
 

 
.top {float: left; padding-left: 20px;} 
 

 
.numbers {float: left; padding-left: 20px; padding-top: 15px;} 
 

 
.symbols {float: right; margin-top: -40px; padding-right: 15px;} 
 
</style> 
 
<script> 
 
function myFunction(clickedId) { 
 
    document.calc.result.value+=clickedId; 
 
} 
 
function Clear() { 
 
    document.calc.result.value=""; 
 
} 
 
function compute() { 
 
try{ 
 
var inp=eval(document.calc.result.value); 
 
document.calc.result.value=inp; 
 
} 
 
catch(err){ 
 
    document.calc.result.value="error"; 
 
} 
 
} 
 
function doMath() { 
 
var inputNum1=document.calc.result.value; 
 
var result = Math.sqrt(inputNum1); 
 
document.calc.result.value = result; 
 
} 
 
function myMultiply() { 
 
var x = parseInt (document.calc.result.value, 10); 
 
var y = x*x; 
 
alert(x + " times " + x + " equals " + y); 
 
return false; 
 
} 
 
function compute() { 
 
try{ 
 
    var inp=eval(document.calc.result.value); 
 
    if(document.calc.result.value==inp) 
 
    inp=inp*inp 
 
    document.calc.result.value=inp; 
 
} 
 
catch(err){ 
 
    document.calc.result.value="error"; 
 
} 
 
} 
 
</script> 
 
</head> 
 
<body> 
 
<div class="calc"> 
 
<center> 
 
<div class="results"> 
 
    <form name="calc"> 
 
    <input type="text" name="result" readonly> 
 
    </form> 
 
</div> 
 
<table> 
 
<div class="top"> 
 
    <button type="button" id="CLEAR" onclick="Clear()"><font color="#CC0000">C</font></button> <!--Izdzēst rakstīto--> 
 
    <button type="button" id="3.141592653589793" onclick="myFunction(this.id)">π</button> <!--Skaitlis 3.14...--> 
 
    <button type="button" id="6.283185307179586" onclick="myFunction(this.id)">τ</button> <!--Skaitlis 6.28...--> 
 
</div> 
 
<br> 
 
<div class="numbers"> 
 
    <button type="button" id="1" onclick="myFunction(this.id)">1</button> <!--Skaitlis 1--> 
 
    <button type="button" id="2" onclick="myFunction(this.id)">2</button> <!--Skaitlis 2--> 
 
    <button type="button" id="3" onclick="myFunction(this.id)">3</button> <!--Skaitlis 3--> 
 
<br> 
 
    <button type="button" id="4" onclick="myFunction(this.id)">4</button> <!--Skaitlis 4--> 
 
    <button type="button" id="5" onclick="myFunction(this.id)">5</button> <!--Skaitlis 5--> 
 
    <button type="button" id="6" onclick="myFunction(this.id)">6</button> <!--Skaitlis 6--> 
 
<br> 
 
    <button type="button" id="7" onclick="myFunction(this.id)">7</button> <!--Skaitlis 7--> 
 
    <button type="button" id="8" onclick="myFunction(this.id)">8</button> <!--Skaitlis 8--> 
 
    <button type="button" id="9" onclick="myFunction(this.id)">9</button> <!--Skaitlis 9--> 
 
<br> 
 
    <button type="button" id="0" onclick="myFunction(this.id)">0</button> <!--Skaitlis 0--> 
 
</div> 
 
<br> 
 
<div class="symbols"> 
 
    <button type="button" id="ANS" onclick="compute()">=</button> <!--Vienādības zīme--> 
 
\t <br> 
 
    <button type="button" id="*" onclick="myFunction(this.id)">x</button> <!--Reizināšanas zīme--> 
 
\t <br> 
 
    <button type="button" id="/" onclick="myFunction(this.id)">÷</button> <!--Dalīšanas zīme--> 
 
\t <br> 
 
    <button type="button" id="+" onclick="myFunction(this.id)">+</button> <!--Plusa zīme--> 
 
\t <br> 
 
    <button type="button" id="-" onclick="myFunction(this.id)">-</button> <!--Mīnusa zīme--> 
 
\t <br> 
 
\t <button type="button" id="SQRT" onclick="doMath()">√</button> <!--Kvadrātsakne--> 
 
\t <br> 
 
\t <button type="button" id="imp*inp" onclick="compute()"><sub>2</sub></button> <!--Kvadrāts--> 
 
</div> 
 
<br> 
 
</table> 
 
</center> 
 
</div> 
 
<center> 
 
<p>Special thanks to my peeps at <a href="http://www.stackoverflow.com">StackOverFlow</a> for helping me with some issues!</p> <!--Pateicības piezīme--> 
 
</center> 
 
</body> 
 
</html>

источник

2015-08-21 svens

Дайте им имя класса, используйте 'getElementsByClassName()' и цикл for, чтобы установить новый css для всех элементов с этим именем класса? – NewToJS

На этом не было бы учебника по переполнению стека. Во-первых, вам нужно будет аккуратно отформатировать кнопки в html, используя таблицу или загрузку. Затем вы просто устанавливаете высоту/ширину в css –

Попробуйте добавить некоторые CSS:

button { 
    width: 40px; 
    height: 40px; 
}

источник

2015-08-21 12:17:23 Lauromine

Вы можете сделать это с помощью CSS, JS нет необходимости:

.symbols button{ 
    width: 35px; 
    height: 35px; 
}

Это предназначено для всех кнопок в символе div.

Вы можете также сделать его более универсальным:

button{ 
    width: 35px; 
    height: 35px; 
}

который затем стиль каждая кнопка на этой странице.

источник

2015-08-21 12:18:09

Как сделать все кнопки JavaScript одинакового размера?

ответ

Смежные вопросы