时间戳

首页 > 解决方案 > 如何进行我的两个输入计算，每个计算结果都输出不同的颜色？

javascript - 如何进行我的两个输入计算，每个计算结果都输出不同的颜色？

问题描述

基本上，在函数中，我试图让每种类型的计算以它们自己独特的颜色显示结果。但是，当我尝试计算时，它们都显示为橙色，而橙色应该只用于加法。对于减法，它应该是蓝色的，乘法它应该是红色的，除法应该是绿色的。

我该如何解决这个问题？

<script type="text/javascript">

function addBy()
  {
    var num1, num1, res;
    num1=Number(document.formcalc.txtnum1.value);
    num2=Number(document.formcalc.txtnum2.value);
    res=num1+num2;
    document.formcalc.txtres.value=res;
  }
	
function subtractBy()
{
	var num1, num1, res;
	num1=Number(document.formcalc.txtnum1.value);
	num2=Number(document.formcalc.txtnum2.value);
	res=num1-num2;
	document.formcalc.txtres.value=res;
}
		
function multiplyBy()
{
	var num1, num1, res;
	num1=Number(document.formcalc.txtnum1.value);
	num2=Number(document.formcalc.txtnum2.value);
	res=num1*num2;
	document.formcalc.txtres.value=res;
}

function divideBy()
{
	var num1, num1, res;
	num1=Number(document.formcalc.txtnum1.value);
	num2=Number(document.formcalc.txtnum2.value);
	res=num1/num2;
	document.formcalc.txtres.value=res;
}

  document.getElementById("txt_AddBy").style.color = "#ffa500";
  document.getElementById("txt_subtractBy").style.color = "#0009ff";
  document.getElementById("txt_multiplyBy").style.color = "#ff0000";
  document.getElementById("txt_divideBy").style.color = "#00ff00";


</script>
<html>
<head>
	<title>Calculate</title>
</head>
<body>
	<form name="formcalc">
	Number 1: <input type="text" name="txtnum1">
	<br>
	Number 2: <input type="text" name="txtnum2">
	<br>
	Answer : <input id="txt_AddBy" id="txt_subtractBy" id="txt_multiplyBy" id="txt_divideBy" type="text" name="txtres" disabled="disabled"/> <br>
		
	<input type="button" value="Add" onClick="addBy()"/>
	<input type="button" value="Subtract" onClick="subtractBy()">
	<input type="button" value="Multiply" onClick="multiplyBy()">
	<input type="button" value="Divide" onClick="divideBy()">
	</form>

</body>
</html>

标签： javascripthtml

解决方案

当你只用一个就能实现的时候，为什么还要有这么多的功能呢？

我们将如何仅使用一个将应用于所有buttons 的函数来做到这一点（实际上input[type="button"]您的代码中无论如何都有）：

  • s中HTML不会有这些onClick，button而是JavaScript​​会处理 click 事件，因为这是推荐的方式。
  • data-*将添加 两个属性：
    • data-operator: 它定义了button(add, multiply...) 的操作，它可以是+, -,*或/(JavaScript将知道button单击 a 时应该执行哪个操作)。
    • data-color：它具有结果的颜色（橙色表示添加......）input（我想知道你为什么使用禁用input来显示结果！）。
  • 一个辅助函数和一个object用于获得正确结果和颜色的函数：
    • operators: 这是一个object包含四个基本运算（加法、减法...）作为每个运算的函数。data-operator操作的使用基于button被单击的。
    • calculate: 是计算结果并根据单击的operators object和调整颜色的函数。data-colorbutton

让我们不再赘述，这是一个工作示例，它有很多有用的注释，可以在阅读代码时为您提供帮助：

/**
* btns: the operations buttons (input[type="button"] you used).
* numOne: the "#num-1" input.
* numOne: the "#num-2" input.
* res: the "#result" input.
* operators: the object having the fundamental operations.
* calculate: the function that calculates and prints the result. CAUTION this function doesn't check if the inputs (numOne and numTwo) have a valid numbers, a "NaN" text will be printed in that case.
**/
const btns = [...document.querySelectorAll('input[type=button]')],
  numOne = document.getElementById('num-1'),
  numTwo = document.getElementById('num-2'),
  res = document.getElementById('result'),
  operators = {
    '+': (x, y) => {return x + y;},
    '-': (x, y) => {return x - y;},
    '*': (x, y) => {return x * y;},
    '/': (x, y) => {return y !== 0 ? x / y : 0;}
  },
  calculate = (op, color) => {
    /** calculate the result based on the operation from the data-operator of the button being clicked using the "operation" object **/
    /** the plus sign "+" in front of "numOne.value" (and the other one) is used to convert the inputs values to integers (without no any Number or parseInt) **/
    res.value = operators[op](+numOne.value, +numTwo.value);
    /** change the color based on the color from the data-color of the button being clicked **/
    res.style.color = color;
  };

/** cycle through the buttons and attach a click event handler for each one **/
/** addEventListener function adds a click event handler to each button **/
btns.forEach(el => el.addEventListener('click', () => calculate(el.dataset.operator, el.dataset.color)));
/** call the "calculate" function and send in the parameters the data-operator and the data-color of the button that is clicked  **/
<!--removed the IDs on the buttonsand added the "data-*" attributes -->
<!-- the IDs of the inputs for the number are changed (not a big deal, make sure to change them in the "JavaScript" part as well if you want to change them) -->
<form name="formcalc">
  Number 1: <input type="text" id="num-1" name="txtnum1">
  <br> Number 2: <input type="text" id="num-2" name="txtnum2">
  <br> Answer : <input id="result" type="text" name="txtres" disabled="disabled" /> <br>

  <input type="button" data-operator="+" data-color="#ffa500" value="Add" />
  <input type="button" data-operator="-" data-color="#0009ff" value="Subtract" />
  <input type="button" data-operator="*" data-color="#ff0000" value="Multiply" />
  <input type="button" data-operator="/" data-color="#00ff00" value="Divide" />
</form>

一些有用的链接：

了解有关querySelectorAll功能的更多信息。

了解有关addEventListener功能的更多信息。

了解有关forEach功能的更多信息。

推荐阅读