Question

我是初学者，试图在JS中创建一个在线计算器。我制作了按钮，通过它们循环，然后创建了一个功能，可以使用屏幕的innerHTML在屏幕上单击并显示数字。但它是说未定义。这是代码。

  <FlatList
    inverted
    data={messages}
    keyExtractor={this._keyExtractor}
    renderItem={({ item }) => (
     <Text style={styles.item}>{item}</Text>
    )}
    onEndReached={this.handleLoadMore}
    onEndReachedThreshold={30}
  />

Answer 1

如何做到这一点的一个例子：

＆＃13;

const screen = document.getElementById("screen")
const allButtons = document.getElementsByClassName('buttons');

Array.prototype.forEach.call(allButtons, (e) => e.addEventListener('click', () => screen.innerHTML += e.innerHTML));

＆＃13;

<div id="screen"></div>
<br><br>
<div class="buttons">Button1 </div>
<div class="buttons">Button2 </div>
<div class="buttons">Button3 </div>

＆＃13;

Answer 2

您是否为您创建的所有按钮添加了id属性？有可能它说未定义因为它无法找到id属性。

Answer 3

<!DOCTYPE html>
<html>
<head>
    <title>Online Calculator</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="calc.css">
</head> 
<body>
    <textarea id="screen" placeholder="0"></textarea>
    <div class="buttonswrap">
        <button id="num1" class= "buttons" value="1">1</button>
        <button id="num2" class= "buttons" value="2">2</button>
        <button id="num3" class= "buttons" value="3">3</button>
        <button id="num4" class= "buttons" value="4">4</button>
        <br>
        <button id="num5" class= "buttons" value="5">5</button>
        <button id="num6" class= "buttons" value="6">6</button>
        <button id="num7" class= "buttons" value="7">7</button>
        <button id="num8" class= "buttons" value="8">8</button>
        <br>
        <button id="num9" class= "buttons" value="9">9</button>
        <button id="num0" class= "buttons" value="0">0</button>
        <button id="plus" class= "buttons" value="+">+</button>
        <button id="multiply" class= "buttons" value="*">*</button>
        <br>
        <button id="divide" class= "buttons" value="/">/</button>
        <button id="minus" class= "buttons"  value="-">-</button>
        <button id="point" class= "buttons"  value=".">.</button>
        <button id="equals" class= "buttons"  value="=">=</button>
    </div>
<script type="text/javascript" src="calc.js"></script>
</body>
</html>

这是我的HTML

试图在屏幕上显示按钮点击结果

3 个答案: