gpt4 book ai didi

javascript - 使用行计数器函数increment()和函数parse()清除两个文本区域

转载 作者:行者123 更新时间:2023-11-28 03:35:54 24 4
gpt4 key购买 nike

除了 JavaScript 函数clear() 无法正常工作之外,我的代码运行良好。我不确定如何让它发挥作用。当用户从文本框输入框中调用函数clear()时,应清除4个文本区域加1个div,并重置行计数器。带有行计数器的两个文本区域(counter1 和 counter2)是产生此问题的一次,因为其中涉及三个函数:increment()、parse() 和clear()。

简单地清除没有附加任何功能的文本框相当简单

document.getElementById('inputbox').value = "";

但在我的例子中,涉及另外两个函数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 "";
};

关于javascript - 使用行计数器函数increment()和函数parse()清除两个文本区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57745942/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com