span类元素中没有显示任何值

LogNIsGood

这是代码:

var listener = document.querySelectorAll('#calculator span');

// look at each widget pressed and update calculator
for (var count = 0; count < listener.length; count++) {
  listener[count].onclick = function() {
    update()
  };
}



function update() {
  // Get input of calculator screen and button pressed
  var widget = this.innerHTML;
  var screen = document.querySelector('.screen');
  var screenIn = screen.innerHTML;

  // clear the screen
  if (widget == 'DEL') {
    screen.innerHTML = '';
  }

  // if = sign is pressed, evaluate the screen input
  // TODO: handle special cases (like if the input equation isn't syntactically correct)
  else if (widget == '=') {
    screen.innerHTML = eval(inputEq);
  }

  // change x to * for evaluator
  else if (widget == 'x') {
    screen.innerHTML += '*';
  }

  //clear the text inside the screen
  else if (widget == 'C') {
    screen.innerHTML = "";

  } else {
    screen.innerHTML += widget;
  }

}
<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="main.js"></script>
  <link href="css.css" type="text/css" rel="stylesheet" />
</head>

<body>
  <div id="calculator">
    <!-- Screen and clear button -->
    <div class="top">
      <span class="clear">C</span>
      <div class="screen"></div>
    </div>

    <div class="buttons">
      <!-- number operators and other buttons -->
      <span>7</span>
      <span>8</span>
      <span>9</span>
      <span class="operator">DEL</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span class="operator">/</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span class="operator">x</span>
      <span>+/-</span>
      <span>0</span>
      <span>.</span>
      <span class="operator">-</span>
      <span>(</span>
      <span>)</span>
      <span class="eval">=</span>
      <span class="operator">+</span>
    </div>
  </div>
</body>

</html>

由于某些原因,单击时,任何跨度值都不会显示在屏幕部分上。我不确定到底发生了什么。我尝试了各种方法来将更新功能分配给按钮单击,但是似乎没有任何效果。如果你们注意到我没有的事,请告诉我。

这是CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;

font: bold 14px Verdana, Geneva, sans-serif;
}

html {
height: 100%;
background: black;
background-size: cover;
}

#calculator {
width: 325px;
height: auto;
margin: 100px auto;
padding: 20px 20px 9px;
background: #b6ffad;
border-radius: 20px;
box-shadow: 0px 4px #94ce8c, 0px 10px 15px rgba(0, 0, 0, 0.2);
}

.top span.clear {
float: left;
}

.top .screen {
height: 40px;
width: 212px;

float: right;

padding: 0 10px;

background: rgba(0, 0, 0, 0.2);
border-radius: 20px;
box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);

font-size: 17px;
line-height: 40px;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
text-align: right;
letter-spacing: 1px;
}

.buttons, .top {overflow: hidden;}

.buttons span, .top span.clear {
float: left;
position: relative;
top: 0;

cursor: pointer;

width: 66px;
height: 36px;

background: white;
border-radius: 20px;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);

margin: 0 7px 11px 0;

color: #565656;
line-height: 36px;
text-align: center;

user-select: none;

transition: all 0.2s ease;
}

.buttons span.operator {
background: #afafaf;
box-shadow: 0px 4px #878787;
margin-right: 0;
color: white;
}

.buttons span.eval {
background: #4c4c4c;
box-shadow: 0px 4px #333333;
color: white;
} 

.top span.clear {
background: #ff9fa8;
box-shadow: 0px 4px #ff7c87;
color: white;
}

.buttons span:hover {
background: #82d179;
box-shadow: 0px 4px #64a05d;
color: white;
}

.buttons span.eval:hover {
background: #e2e2e2;
box-shadow: 0px 4px #bababa;
color: black;
}

.top span.clear:hover {
background: #f68991;
box-shadow: 0px 4px #d3545d;
color: white;
}

.buttons span:active {
box-shadow: 0px 0px #ffffff;
top: 4px;
}

.buttons span.eval:active {
box-shadow: 0px 0px #ffffff;
top: 4px;
}

.top span.clear:active {
top: 4px;
box-shadow: 0px 0px #ffffff;
}
皮内达

以这种方式分配onclick处理程序不会自动将clicked元素作为处理程序的上下文传递。因此,您对此内部的update引用是引用window而不是<span>元素。

要实现所需的功能,请如下修改您的.js文件:

for (var count = 0; count < listener.length; count++) {
  listener[count].onclick = function(event){
//                                     ^---include the event param here

    update(event);
//           ^---- pass the reference to your update function
  };
}

//              v-----define an event parameter 'e' in your update function
function update(e) {

  // Your new widget variable will be:
  var widget = e.target.innerHTML;

  //...include the rest of your code as is
  // apart from:
  else if (widget == '=') {
    //screen.innerHTML = eval(inputEq);
    //                           ^---- inputEq not defined anywhere
    // change to:
    screen.innerHTML = eval(screen.innerHTML);
  }

} 

单击此处以获取与上述等效的jsbin

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

片段中的Recyclerview没有显示任何内容

Doxygen,图形类层次结构中没有任何显示

SpriteKit中没有任何显示

曲线图显示负值,但没有任何值

我没有任何元素可以在打印预览中显示颜色

ListView显示数据库中没有任何项目

如何定位<span>元素的innerHTML,该元素在php中没有任何ID或标签?

如何解决“初始化程序没有为此绑定元素提供任何值,并且绑定元素没有默认值。” 在TypeScript中?

有没有一种方法可以为我们在* ngFor Angular 8中迭代的每个值生成新的span元素?

如果子元素和父元素具有相同的类,则不显示任何内容

如何将数据属性添加到JSX中的HTML元素而没有任何值

当计算内部没有任何值时,NaN被播种。如何在SwiftUI中显示“ 0”或“-”

在rake任务中调用类方法,没有任何反应

从<span>中刮取“ href”,而在<div>中没有任何类

在带有python硒的类中单击span元素

选择没有任何包含字符串的类的元素

为什么该列表在sencha touch 2中没有显示任何元素?

在虚拟框中以全屏模式显示。没有任何帮助

列表视图在android studio中没有显示任何值

如何检查div中是否有任何span元素具有空值

在Oracle SQL中,即使没有返回任何值的行也如何显示0?

刮擦的外壳没有显示任何元素

单击div类中的span元素

没有任何数据显示在外键列中

Devexpress Xtrareport在我的打印中没有显示任何内容

如果使用php在数据库中没有任何值,如何显示首次零值?

pug 中的“组中的每个元素”不显示任何值

没有活动类的元素值“.prev()”按钮的递减

Pygame 示例在我的 Mac 中没有显示任何内容