按钮不显示分配给绘图计算器的值

我不确定这是否是超级基本的，但我正试图通过onclick函数为一些按钮添加数值。所有这些都是用html和javascript完成的。

它可以很好地显示数字，但如果有意义的话，似乎不会让数字有任何值。我只是不断得到空值。是因为所有的onclick事件吗？

下面是html。

var getvaule7.value = document.getElementsByClassName("7");
getvaule7.value = 7;
var getvaule8 = document.getElementsByClassName("8");
getvaule8.value = 8;
var getvaule9 = document.getElementsByClassName("9");
getvaule9.value = 9;
var getvaule4 = document.getElementsByClassName("4");
getvaule4.value = 4;
var getvaule5 = document.getElementsByClassName("5");
getvaule5.value = 5;
var getvaule6 = document.getElementsByClassName("6");
getvaule6.value = 6;
var getvaule1 = document.getElementsByClassName("1");
getvaule1.value = 1;
var getvaule2 = document.getElementsByClassName("2");
getvaule2.value = 2;
var getvaule3 = document.getElementsByClassName("3");
getvaule3.value = 3;
var getvaule0 = document.getElementsByClassName("0");
getvaule0.value = 0;
function number7() {       
document.getElementById("show").value = getvaule7.value;
}
console.log(number7());
function number8() {
document.getElementById("show").value = getvaule8.value;
}
function number9() {
document.getElementById("show").value = getvaule9.value;
}
function number4() {
document.getElementById("show").value = getvaule4.value;
}
function number5() {
document.getElementById("show").value = getvaule5.value;
}
function number6() {
document.getElementById("show").value = getvaule6.value;
}
function number1() {
document.getElementById("show").value = getvaule1.value;
}
function number2() {
document.getElementById("show").value = getvaule2.value;
}
function number3() {
document.getElementById("show").value = getvaule3.value;
}
function number0() {
document.getElementById("show").value = getvaule0.value;
}

<body>
<h1 style="text-align: center;">
Graphing Calculator from Scratch
</h1>
<div id="Text box" style="text-align: center;">
<input type="text" name="" id="show">


</div>
<br></br>
<div style="text-align:center" id="click-row">
<div id="row one" ><button type="button" class="7" onclick="number7()" value=7> 7</button> 
<button type="button"  class="8" onclick="number8()" >8</button> 
<button type="button" class="9" onclick="number9()">9</button> 
</div>
<div id="row two"><button type="button" class="4" onclick="number4()">4</button> 
<button type="button" class="5" onclick="number5()">5</button> 
<button type="button" class="6"  onclick="number6()">6</button> 
</div>
<div id="row three"><button type="button" class="1" onclick="number1()">1</button> 
<button type="button" class="2" onclick="number2()">2</button> 
<button type="button" class="3" onclick="number3()">3</button> 
</div>


<button type="button" class="0" onclick="number0()">0</button> 
<button type="button" class=".">.</button> 
<button type="button" class="𝝅">𝝅</button>


<div id="row 5">
<div id="row 5"><button type="button" class="+/-">+/-</button> 
<div id="row 5"><button type="button" class="+">+</button>
<div id="row 5"><button type="button" class="-">-</button>   
<button type="button" onclick="enter()" >=</button> 

</div>
<br>
<button onclick="document.getElementById('show').value = ''" style="text-align:center;">Clear input field</button>
</div>

</div>
</div>
</div>
</body>
</html>

首先，您处理它的方式不是最好的方法，但由于您才刚刚开始，我不会混淆您，而是更正您的代码。

你的代码中有几个错误

按钮没有值，它具有innerText属性。价值属性仅用于输入标记
当您试图将值设置为显示输入，因为=将擦除手之前的内容
您还没有定义enter((函数，它会给您带来错误必须先创建enter函数
另一件事是document.getElementsByClassName("7"(不会像getElementById那样返回一个元素，但它返回一个数组，这就是为什么如果您使用gelementsByClassName，您还必须写[number]，其中number是返回数组中元素的索引。在您的情况下，数字是0，这意味着数组中的第一个元素

另一个问题是你不需要使用getValue7.value=document.get…因为你使用它只是为了存储元素，所以你可以使用getValue=document.getlE…

如果你的html标签嵌套不正确，请正确嵌套。

帮助您理解正确的解决方案。我在下面为你的项目写了最低限度的代码。，请将其与您的代码进行比较，看看出了什么问题

var  getvaule7 =document.getElementsByClassName("7")[0];
var  getvaule8 =document.getElementsByClassName("8")[0];
var  getvaule9 =document.getElementsByClassName("9")[0];
var  getPlus = document.getElementsByClassName("plus")[0];
function number7(){
document.getElementById("show").value += getvaule7.innerText;
}
function number8(){
document.getElementById("show").value += getvaule7.innerText;
}
function number9(){
document.getElementById("show").value += getvaule7.innerText;
}
function plus(){
document.getElementById("show").value += getPlus.innerText;
}
function enter(){
document.getElementById("show").value = eval(document.getElementById("show").value);
}

<h1 style="text-align: center;">
Graphing Calculator from Scratch
</h1>
<div id="Text box" style="text-align: center;">
<input type="text" name="" id="show"> 
</div>
<br></br>
<div style="text-align:center" id="click-row">
<div id="row one" >
<button type="button" class="7" onclick="number7()" value=7>7</button> 
<button type="button"  class="8" onclick="number8()" >8</button> 
<button type="button" class="9" onclick="number9()">9</button> 
</div>

<div id="row 5">
<button type="button" onclick="plus()" class="plus">+</button>
<button type="button" onclick="enter()" >=</button>   
</div>
<br>
<button onclick="document.getElementById('show').value = ''" style="text-align:center;">Clear input field</button>

function load() {


let num7=document.getElementById("7").addEventListener('click',()=>{
document.querySelector(".show").value+=7;









})


let num8=document.getElementById("8").addEventListener('click',()=>{
document.querySelector(".show").value+=8;









})



var userEnter1= parseInt(document.querySelector(".show").value);
var userEnter2=parseInt(document.querySelector(".show").value);
[0]
// HOW TO MAKE SURE THAT A USER CAN INPUT ANOTHER DATA AFTER PRESSING THE + 



let add=document.getElementById("add").addEventListener('click',()=>{
document.querySelector(".show").value+="+";

userEnter1+userEnter2;




}) 




const equals=document.getElementById("equals").addEventListener('click',()=>{

console.log(  userEnter1+userEnter2); 
});










}
window.onload = load;








}
window.onload = load;

<body>
<h1 style="text-align: center;">
Graphing Calculator from Scrach  
</h1>
<div id="Text box" style="text-align: center;">
<input type="text" class="show" id="clear">


</div>
<br></br>
<div style="text-align:center" id="click-row">
<div id="activate" >
<div id="row one">
<input type="Button"  id="7"  class="num7" value="7"  >  </input>
<input type="Button"  id="8"   value="8"  >  </input>

</div>
<div id="row 2">
<input type="Button"  id="add"   value="+" onclick="" >  </input>
<input type="Button"  id="equals"   value="="  >  </input>

</div>
</div>
<br>
<button onclick="document.getElementById('clear').value = ''" style="text-align:center;">Clear input field</button>
</div>

</div>
</div>
</div>
</body>
</html>

相关内容

最新更新

热门标签：