个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 15:59:08 24 4
gpt4 key购买 nike

代码如下:

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 处理程序不会自动传递被点击的元素作为处理程序的上下文。因此你在里面引用了这个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);
  }

}

Click here for a jsbin equivalent of the above

关于javascript - span 类元素中没有显示任何值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43023993/

24 4 0
文章推荐： c++ - Visual Studio - 奇怪的字符输出
文章推荐： c++ - "when use an array"中用途的准确描述是什么
文章推荐： c++ - 为什么 std::string 使 WSAGetLastError 返回零？
文章推荐： html - R传单 - 无法导出 map
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com