문제
사용자가 값을 입력하는 입력이있는 테이블이 있고 JavaScript는 Calc를 실행합니다. 출력 값을 표시합니다. 사용자 경험을 향상시키기 위해 JavaScript가 수행하는 계산을 기반으로 출력이 변경 될 때 텍스트의 색상을 변경하고 싶습니다. 이것이 가능한가?
내 노력
나는 인터넷을 살펴본 결과 입력에 값을 입력 할 때 외에는 아무것도 발견하지 못했고 출력 텍스트를 처리하는 것은 없습니다.
예제 코드 http://codepen.io/coryk/pen/rLGZYa
HTML
<head>
<title></title>
</head>
<body>
<table>
<tr>
<td>Input</td>
<td><input class="input_green" id="input" type="number" value="0"></td>
<td></td>
<td>Output</td>
<td><input class="input_yellow" id="output" readonly type="number" value="10"></td>
</tr>
</table>
</body>
자바 스크립트
var foo = function(){
var val = parseFloat($('#input').val());
var total = val * 3;
$('#output').val(total);
}
foo();
document.getElementById("input").onchange = (function() {
foo();
});
입력에 이미 클래스가 있습니다. 여기 CSS를 통해 텍스트의 기본 색상을 설정하고 거기에서 작업하는 것이 좋습니다. 노란색은보기 어렵습니다. 나는 파란색을 사용했다
아래 스 니펫을 실행하면 첫 번째 입력 상자에 1을 입력하면 출력이 파란색이지만 예를 들어 4 또는 5를 입력하면 결과가 10 이상이므로 출력이 빨간색임을 알 수 있습니다.
var foo = function(){
var val = parseFloat($('#input').val());
var total = val * 3;
if(total > 10){
$('.input_blue').css("color", "red");
}
$('#output').val(total);
}
foo();
document.getElementById("input").onchange = (function() {
foo();
});.input_blue{color:blue;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tr>
<td>Input</td>
<td><input class="input_green" id="input" type="number" value="0"></td>
<td></td>
<td>Output</td>
<td><input class="input_blue" id="output" readonly type="number" value="10"></td>
</tr>
</table>
</body>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다