javascript - 计算器生成控制台日志，但屏幕上没有显示任何内容-6ren

javascript - 计算器生成控制台日志，但屏幕上没有显示任何内容

转载作者：行者123 更新时间：2023-12-02 14:01:56

25

4

我必须使用 JavaScript/jquery 构建这个计算器，但是当我按下按钮时，屏幕上不会显示任何数字，它会显示在控制台日志中，没有错误，我只需要帮助弄清楚如何获取数字显示在屏幕上任何帮助表示赞赏

function init(){
    
    	console.log('start');
     var num1 = 0;
     var num2 = 0;
     var op = '';
     var ON = '';
    
     $('.digit, .operator orange').click(function(){
     	var ID = this.id;
     	console.log(ID);
     	calculator(this);
    
    
    });
    
    function calculator(obj){
    	console.log(ON);
    	var ID = obj.id;
    	var type = obj.classList[1];
    
    	
    	if(type === 'digit'){
    		if (ON == true){
    			$('#calculation').empty();
    	}
    
    		$('#calculation').append(ID);
    		console.log(ID + '!')
    		}else if(type === 'operator orange'){
    		op =obj.textContent;
    		if(num1 == 0){
    		num1 = $('#calculation').text();
    
    			
    		}else{ 
    		num2 = $('#calculation').text();
    		num1 = eval(num1 + op + num2);
    		}
    		
    		$('#calculation').empty();
    	    }else if (type ==='operator orange'){
    		num2 = $('#calculation').text();
    		num1 = eval(num1 + op + num2);
    		$('#calculation').empty();
    		$('#calculation').append(num1);
    		ON = true;
    		num1= 0;
    		num2= 0;
    			
    
    		}else if(type === 'clear'){
    		$('#calculation').empty();
    		num1=0;
    		num2=0;
    		ON = false;
    
    
    			}
    
    
       }
    
    }
    $(document).ready(init);

<html>
<head>
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    	<title>Calculator</title>
    	<link rel="stylesheet" type="text/css" href="reset.css" />
    	<link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
    	<div id="calculator">
    		<div id="calculation">0</div>
    		<div class="buttons">
    			<ul>
    				<li id="clear" class="clear darkgray">C</li>
    				<li class="empty darkgray">&nbsp;</li>
    				<li class="empty darkgray">&nbsp;</li>
    				<li id="/" class="operator orange">/</li>
    			</ul>
    			<ul>
    				<li id="7" class="digit">7</li>
    				<li id="8" class="digit">8</li>
    				<li id="9" class="digit">9</li>
    				<li id="*" class="operator orange">*</li>
    			</ul>
    			<ul>
    				<li id="4" class="digit">4</li>
    				<li id="5" class="digit">5</li>
    				<li id="6" class="digit">6</li>
    				<li id="-" class="operator orange">-</li>
    			</ul>
    			<ul>
    				<li id="1" class="digit">1</li>
    				<li id="2" class="digit">2</li>
    				<li id="3" class="digit">3</li>
    				<li id="+" class="operator orange">+</li>
    			</ul>
    			<ul>
    				<li id="0" class="digit wide nobottom">0</li>
    				<li id="." class="digit nobottom">.</li>
    				<li id= "=" class="equals orange nobottom">=</li>
    			</ul>
    		</div>
    
    	</div>
    	<script src="js.js"></script>
     </body>
    </html>

最佳答案

问题就在这里

$('#calculation').append(num1);

将 .append 更改为 .text

关于javascript - 计算器生成控制台日志，但屏幕上没有显示任何内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40344887/

25

4

0

文章推荐： javascript - setDate 不返回该月的最后一天 Javascript

文章推荐： windows - Direct2d 时序性能

文章推荐： javascript - 从 Json 加载 FabricJS

big-o - O(日志(A))+ O(日志(B))= O(日志(A * B))？
这是真的: log(A) + log(B) = log(A * B) [0] 这也是真的吗？ O(log(A)) + O(log(B)) = O(log(A * B)) [1] 据我了解 O(f
[Java/日志]日志框架打印应用程序日志代码的执行情况
0 引言我常以为配置 INFO 日志级别时，应用程序代码中日志器(logger) debug 级的日志代码，不会被执行（比如，实验1中的printTestLog函数）。但今天线上的问题，
17、Gradle 日志
日志日志是构建工具的主要界面。如果日志太多，真正的警告和问题容易被隐藏。另一方面，如果出了错，你需要找出相关的信息。Gradle 定义了6个日志级别，如表 18.1，“日志级别”所示。除了那些您通
182、故障排除和调试HBase：日志
日志关键进程日志如下…（将替换为启动服务的用户，将替换为计算机名称） NameNode： $ HADOOP_HOME / logs / hadoop- -namenode- .log Da
远程分支中特定文件行的下一次更改的 Git 日志
我正在探索项目的 git 历史 FFMpeg .我在提交之间对每个文件执行了更改 517573a67088b5c7a25c18373434e3448892ee93和 80bb65fafab1d2f5f
regex - 日志。使用正则表达式进行搜索
我不知道如何在 loggly 中使用正则表达式进行搜索。例如，使用表达式 /24nonstop.+7554/ 记录我想查找的内容. { "level_name": "WARNING", "ex
Magento API 日志
有没有办法为 API 调用打开日志记录？我们有一个第三方应用程序在使用我们的商店时遇到问题，希望获得一些调试信息。 ~我已经搜索了 bt 一无所获。我正在使用 1.7 最佳答案在一段受控的时间内
跨副本和移动的固定路径的 SVN 日志
我正在尝试获取 SVN 中所有副本/移动/等的固定路径的日志历史记录(如果可能的话，递归地)。实际上，我试图避免 peg revisions ，并将日志应用于路径而不是对象。 svn 手册提出了这个问
带有数据和时间戳的 nant 日志
如何在命令行中运行 NAnt 脚本并在日志文件中获取每个任务的时间？ using nant task or NAnt -buildfile:testscript.build testnanttarg
Coldfusion UserAgent 日志？
是否有任何默认方式来记录哪些用户代理访问了您的服务器？我需要编制一份访问我们网站的浏览器列表，以便我们知道我们最能支持什么。谢谢! 最佳答案日志CGI.HTTP_USER_AGENT ，也许在 A
spring - 日志 JavaMailSenderImpl
我在我的应用程序中使用 Spring 发送电子邮件。我想在发送电子邮件时记录 imap 服务器操作。我尝试按如下方式在我的 applicationContext.xml 中实现日志:
Kubernetes 日志——从头开始
我已经运行一个 pod 一个多星期了，从开始到现在没有重启过。但是，我仍然无法查看自它启动以来的日志，它只提供最近两天的日志。容器是否有任何日志轮换策略以及如何根据大小或日期控制轮换？我尝试了以下命
elasticsearch - 日志，度量标准和分析数据都应归入一个数据湖还是应单独存储？
背景: 我正在设置我的第一个 flex 堆栈，尽管我将开始简单，但是我想确保我从良好的体系结构开始。我最终希望有以下解决方案:托管指标，服务器日志(expressjs APM)，单页应用程序监视(AP
带单行的 Mercurial 日志
常规的 hg log 命令给出每个变更集至少 4 行的输出。例如 changeset: 238:03a214f2a1cf user: My Name date: Th
java - 日志 - 如何删除日志文件中的数据库信息
我在我的项目中使用 Spring iBatis 框架。然后使用 logback 进行记录。然后，在检查日志文件时，我可以看到系统正在使用的数据库...出于安全目的我想隐藏它这是示例日志.. 12:2
两个标签之间的 Mercurial 日志
我想使用 hg log 生成一个简短的变更日志，涵盖最新版本的变更。发行版标有“v”前缀，例如“v0.9.1”或“v1.0”。是否可以使用 revsets 选择以“v”开头的最后两个标签之间的范围，不
PHP - 将对象打印到后端功能的控制台/日志
我是 PHP 的新手，所以如果有一个简单的答案，请原谅我。我在 stackoverflow 中搜索过任何类似的问题，但找不到任何帮助。我正在开发一个现有的基于 php 的应用程序，我只需要能够将对象
Linux RADIUS 日志
我有一个名为 Radius 的程序可以验证用户登录。运行在CentOS服务器上日志在/var/log/radius.log 中它们如下 Mon Jul 24 22:17:08 2017 : Aut
Python 日志 - 如何动态控制日志记录级别
我最近从使用“日志”切换到“日志”。到目前为止，还不错，但我缺少一项关键功能——在运行时更改最低级别的能力。在“logging'，我可以调用 myLogger.setLevel(logging.I
c++ - 速度关键系统的设计跟踪/日志
假设我们有速度关键的系统(例如统计/分析、套接字编程等)，我们如何设计跟踪和日志。更具体地说，日志和跟踪通常会降低性能(即使我们有关闭机制或冗长的扩展机制)。在这种情况下，是否有任何关于如何“放置”

首页

博学

6Ren·AI

商城

javascript - 计算器生成控制台日志，但屏幕上没有显示任何内容