[英]Textarea disappears after setting value
这是我想做的事情:
通过单击“输入名称”输入缩写(例如MS,AK,LT)。 这将保存一个字符串,然后我将其转换为数组(nameArray)以获取每组缩写。 在将它们随机重新排序后,我想将一些缩写缩写放入文本区域,但这就是问题所在。
这是怎么回事:
缩写显示片刻,然后在函数执行后消失。 (此外,我正在尝试将一个div(带有文本“ randomizing ...”)隐藏起来,在对字母缩写进行重新排序以使其显示4秒钟(4000毫秒)时显示其自身。这就是setTimeout用于...,但也不起作用。div和文本一起消失)。 为什么这些仅与功能的执行协调?
这是JS代码:
var nameArray;
window.onload = pageLoad;
function pageLoad() {
$("#randomizingNotification").hide();
$("#prev_arrow").click(prevUser);
$("#next_arrow").click(nextUser);
$("#enter_names").click(orderNames);
}
function orderNames() {
nameArray = getNames();
randomizeNames();
displayNames();
}
function getNames() {
var initialsString = prompt("Please enter initials, separated by a comma (e.g LK,AS,NM)");
nameArray = initialsString.split(",");
return nameArray;
}
function randomizeNames() {
$("#randomizingNotification").show();
var timer = setTimeout(function(){randomize(nameArray);},4000);
$("#randomizingNotification").hide();
clearTimeout(timer);
}
function randomize(array) {
for (var i = 0; i < array.length; i++ ) {
var randNum = Math.floor(array.length*Math.random()) //random number between 0 and length of array (rounded down
var temp = array[i];
array[i] = array[randNum];
array[randNum] = temp;
}
}
function displayNames() {
var curr, up, prev, current, upcoming, previous;
curr = 0;
up = 1;
prev = null
current = nameArray[curr];
upcoming = nameArray[up];
$("#upcoming_pick").val(upcoming);
$("#current_pick").val(current);
}
以下是相关的HTML代码:
<body>
<div id="header">
<div id="randomizeNotContDiv">
<div id="randomizingNotification">randomizing...</div>
</div>
<div id="page_title"><h1>Welcome to Classtech Shift Scheduler!</h1></div>
<div id="helper_functions_div">
<div id="enter_names_div">
<a href="" id="enter_names">Enter Names</a>
</div>
</div>
<div id="main_content">
<div id="name_tracker">
<div><a href="" alt="prev" id="prev_arrow"><img src="Images/prev_arrow.png"/></a></div>
<textarea name="upcoming_pick" cols="10" rows="1" class="picker_names" id="upcoming_pick"></textarea>
<textarea name="current_pick" cols="10" rows="1" class="picker_names" id="current_pick"></textarea>
<textarea name="previous_pick" cols="10" rows="1" class="picker_names" id="previous_pick"></textarea>
<div><a href="" alt="next" id="next_arrow"><img src="Images/next_arrow.png"/></a></div>
</div>
您至少有几个问题,但是主要问题是setTimeout的结构。 setTimeout类似于AJAX调用,因为它是非阻塞的。 您传递给函数的函数内部的任何内容都只会在定时器完成后执行,而其后的代码将立即执行。
我已经重新组织了对您的随机消息和displayNames函数的隐藏,使其放到setTimeout函数中,并且一切正常。
这里是一个小提琴: http : //jsfiddle.net/nate/LB6dz/
这是代码:
var nameArray;
window.onload = pageLoad;
function pageLoad() {
$("#randomizingNotification").hide();
$("#enter_names").click(orderNames);
}
function orderNames(event) {
// Prevent the link's default action
event.preventDefault();
nameArray = getNames();
randomizeNames();
}
function getNames() {
var initialsString = prompt("Please enter initials, separated by a comma (e.g LK,AS,NM)");
nameArray = initialsString.split(",");
return nameArray;
}
function randomizeNames() {
$("#randomizingNotification").show();
var timer = setTimeout(function (){
randomize(nameArray);
// These items need to be inside the timeout, so they only run once it's done
$("#randomizingNotification").hide();
displayNames();
}, 4000);
// No need to clearTimeouts after they're done... they only run once
// clearTimeout(timer);
}
function randomize(array) {
for (var i = 0; i < array.length; i++ ) {
var randNum = Math.floor(array.length*Math.random()) //random number between 0 and length of array (rounded down
var temp = array[i];
array[i] = array[randNum];
array[randNum] = temp;
}
}
function displayNames() {
var curr, up, prev, current, upcoming, previous;
curr = 0;
up = 1;
prev = null
current = nameArray[curr];
upcoming = nameArray[up];
$("#upcoming_pick").val(upcoming);
$("#current_pick").val(current);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.