正しく機能しないJavaScript関数clear（）の1つの問題を除いて、私のコードは正常に機能しています。どうすればそれを機能させることができるのかわかりません。ユーザーがテキストボックス入力ボックスから関数clear（）を呼び出すと、4つのテキストエリアと1つのdivがクリアされ、行カウンターがリセットされます。行カウンターを持つ2つのテキストエリア（counter1とcounter2）は、increment（）、parse（）、clear（）の3つの関数が関係しているため、この問題を引き起こしているのは1回だけです。
関数がアタッチされていないテキストボックスをクリアするのはかなり簡単です
document.getElementById（ 'inputbox'）。value = "";
しかし、他の2つの関数increment（）とparse（）が関係している私の場合、それは複雑になります。
以下のJavaScriptコードJavaSとHTML
// first row cursor position in textarea inputbox on page load
function setfocus() {
var input = document.getElementById('inputbox');
input.focus();
}
// counts the number of times the user push enter
function increment(a) {
increment.n = increment.n || 0;
return ++increment.n;
}
function parse(e) {
var key = window.event.keyCode;
if (key == 13) { //keycode for enter
var input = document.getElementById('inputbox');
var output = eval(input.value);
var cc = increment();
document.getElementById("count1").value += '\n' + eval(cc + 1);
document.getElementById("count2").value += cc + '\n';
var out = document.getElementById("outputbox").value
if (out == "" || out.length == 0 || out == null) {
document.getElementById("outputbox").value += output;
} else {
document.getElementById("outputbox").value += '\n' + output;
}
}
}
// clears the input and output boxes
function clear() {
event.preventDefault();
document.getElementById('count1').value = "1";
document.getElementById('count2').value = "";
document.getElementById('inputbox').value = "";
document.getElementById('mydiv').innerHTML = "";
document.getElementById('outputbox').value = "";
};
// an array with random numbers between -1 and 1
function rand(n) {
x = [];
for (var i = 0; i < n; i++) {
x[i] = Math.random() * 2 - 1;
}
console.log("x = " + x);
return x;
}<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="JavaS.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<meta charset="utf-8" />
<style>
.bb {
border: 1px solid black;
}
#count1 {
background-color: lightblue;
width: 20px;
height: 350px;
border: none;
font-size: 15px;
resize: none;
overflow: auto;
}
#inputbox {
background-color: lightblue;
width: 500px;
height: 350px;
border: none;
font-size: 15px;
resize: none;
overflow: auto;
}
#count2 {
background-color: pink;
width: 20px;
height: 350px;
border: none;
font-size: 15px;
resize: none;
overflow: auto;
}
#outputbox {
background-color: pink;
width: 500px;
height: 350px;
border: none;
font-size: 15px;
resize: none;
overflow: auto;
}
#mydiv {
background-color: lightgrey;
width: 1066px;
height: 380px;
}
</style>
</head>
<body>
<table class="bb" style="background-color: lightblue; display: inline-block;">
<tr>
<th colspan="2">User defined JavaScript function input</th>
</tr>
<tr>
<td><textarea id="count1" disabled>1 </textarea> </td>
<td><textarea id="inputbox" onkeypress="parse(event, this)"></textarea></td>
</tr>
</table>
<table class="bb" style="background-color: pink; display: inline-block;">
<tr>
<th colspan="2">Command output</th>
</tr>
<tr>
<td><textarea id="count2" disabled></textarea> </td>
<td><textarea id="outputbox"></textarea></td>
</tr>
</table>
<table class="bb" style="background-color: lightgrey;">
<tr>
<th colspan="4">Plot or help output </th>
</tr>
<tr>
<td colspan="4">
<div id="mydiv"> </div>
</tr>
</table>
<script> setfocus(); </script>
</body>
</html>わかりました、私は自分で問題を解決しました。
function parse(e) {
var key = window.event.keyCode;
if (key == 13) { //keycode for enter
var input = document.getElementById('inputbox');
var output = eval(input.value);
var cc = increment();
console.log("cc = " + cc);
var out = document.getElementById("outputbox").value ;
if (out == "" || out.length == 0 || out == null) {
document.getElementById("count1").value += eval(cc + 1) + '\n';
document.getElementById("count2").value = eval(cc);
document.getElementById("outputbox").value += output;
} else {
document.getElementById("count1").value += eval(cc + 1) + '\n';
document.getElementById("count2").value += '\n' + eval(cc);
document.getElementById("outputbox").value += '\n' + output;
}
}
if (cc == 0) { document.getElementById("count2").value = "" };
}
// clears the input and output boxes
function clear() {
event.preventDefault();
increment.n = -1;
document.getElementById('count1').value = "";
document.getElementById('count2').value = "";
document.getElementById('inputbox').value = "";
document.getElementById('outputbox').value = "";
document.getElementById('mydiv').innerHTML = "";
return "";
};この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加