We Keep Coding

Need to change image to green for specific time interval

I have to set interval time to show my red button to green and then again to red.
I have 5 text box where one text box is defining the sequence that which button will 1st set to green. I have tried bellow thing but all button gets change to red with out time interval.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h2>signal</h2>
sequence : <input type="text" id="txtsequence1" value="1,3,2,4" /><br />
signal 1 :<input type="text" id="txt1" value="5" /><br />
signal 2 :<input type="text" id="txt2" value="2" /><br />
signal 3 :<input type="text" id="txt3" value="6" /><br />
signal 4:<input type="text" id="txt4" value="7" /><br />
<input type="button" onclick="return start()" value="Submit" />
<br />
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image1" alt="img1">
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image2" alt="img2">
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image3" alt="img3">
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image4" alt="img4">
<script>
function start() {
var value = document.getElementById("txtsequence1").value;
var spit = value.split(",");
for (var i = 1; i <= spit.length; i++) {
var interval = document.getElementById("txt" + i).value * 1000;
var images = document.getElementById("image" + i);
images.src = "/Images/green.jpg";
setInterval(changegred, interval);
}
function changegred() {
$(".abc").attr("src", "/Images/red.jpg")
}
}
</script>
What I want that in seq table it is define as 1,3,2,4
and in other text box the time interval for 1 image is set as 5
Now for 1 image time interval is set as 5 so the 1 image will change red image to green for 5 second
Now for 3 image time interval is set as 6 so the 1 image will change to red and 3 image will set as green
now in 2 image time interval is set as 2 so the 3 image will change to red and 2 image will set as green
now in 4 image time interval is set as 7 so the 2 image will change to red and 4 image will set as green

If I understood what you want to do correctly, this should do the trick.
I'm using colored divs instead of images, but that shouldn't matter.
The idea here is that we precompute the actions we want to take into an array, and then walk through that with a function and setTimeout.
var actions = [];
var actionTimer = null;
function resetLights() {
Array.from(document.querySelectorAll(".abc")).forEach(el => el.classList.remove("green"));
}
function playNextAction() {
if (!actions.length) { // nothing to do?
resetLights(); // reset, then quit.
return;
}
var action = actions.shift(); // take the first action
resetLights(); // reset all lights
action.element.classList.add("green"); // set the current light to green
actionTimer = setTimeout(playNextAction, action.interval); // enqueue next action in interval
}
function start() {
var value = document.getElementById("txtsequence1").value;
actions = value.split(",").map((i) => {
var interval = document.getElementById("txt" + i).value * 1000;
var element = document.getElementById("image" + i);
return {
element,
interval
};
});
clearTimeout(actionTimer); // clear any pending action
playNextAction(); // play next action
}
.abc {
background: red;
display: inline-block;
margin: 1em;
padding: 1em;
border-radius: 100%;
color: #fff;
}
.abc.green {
background: lime;
color: #000;
}
<h2>signal</h2>
sequence : <input type="text" id="txtsequence1" value="1,3,2,4" /><br />
signal 1 : <input type="number" id="txt1" value="5" /><br />
signal 2 : <input type="number" id="txt2" value="2" /><br />
signal 3 : <input type="number" id="txt3" value="6" /><br />
signal 4 : <input type="number" id="txt4" value="7" /><br />
<input type="button" onclick="return start()" value="Submit" />
<br />
<div class="abc" id="image1" alt="img1">1</div>
<div class="abc" id="image2" alt="img2">2</div>
<div class="abc" id="image3" alt="img3">3</div>
<div class="abc" id="image4" alt="img4">4</div>

<h2>signal</h2>
sequence : <input type="text" id="txtsequence1" value="1,3,2,4" /><br />
signal 1 :<input type="text" id="txt1" value="5" /><br />
signal 2 :<input type="text" id="txt2" value="2" /><br />
signal 3 :<input type="text" id="txt3" value="6" /><br />
signal 4:<input type="text" id="txt4" value="7" /><br />
<input type="button" onclick="return start()" value="Submit" />
<br />
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image1" alt="">
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image2" alt="">
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image3" alt="">
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image4" alt="">
<script>
var count = 0;
function start() {
var value = document.getElementById("txtsequence1").value;
var spit = value.split(",");
var intervalUpto = 0;
for (var i = 1; i <= spit.length; i++) {
count = spit[i - 1];
var intervalCurrent = document.getElementById("txt" + count).value * 1000;
var b = createInterval(funcb, count, intervalUpto);
createInterval(clearInterval, b, intervalUpto);
intervalUpto = intervalUpto + intervalCurrent;
var a = createInterval(funca, count, intervalUpto);
createInterval(clearInterval, a, intervalUpto);
}
function funca(id) {
var images = document.getElementById("image" + id);
images.src = "/Images/red.jpg";
}
function funcb(id) {
var images = document.getElementById("image" + id);
images.src = "/Images/green.jpg";
}
function clearInterval(id) { clearTimeout(id); }
function createInterval(f, dynamicParameter, interval) { return setInterval(function () { f(dynamicParameter); }, interval); }
}
</script>
Here I had also resolved this in some different way

Javascript Loop - Adding a var to the while condition?

Basically I want to count and display the amount of months it would take to get to a certain point (savings balance) based on a contribution every month.
Here is what I have so far:
function howLong(initial,interest,goal,added){
var initialDeposit = parseInt(initial);
var interestInt = parseInt(interest);
var targetSaving = parseInt(goal);
var contribution = parseInt(added);
var monthCount = 0;
while(initialDeposit <= targetSaving){
monthCount++;
initialDeposit+contribution
}
alert(monthCount)
}
Here is my html form:
<form>
Initial Deposit:<br />
<input type="number" id="initial"><br /><br />
Interest:<br />
<input type="number" id="interest"><br /><br />
Target savings amount:<br />
<input type="number" id="goal"><br /><br />
Monthly Contribution:<br />
<input type="number" id="contribution"><br /><br />
<input type="button" value="How Long!?" onclick="howLong(document.getElementById('initial').value,document.getElementById('interest').value,document.getElementById('goal').value),document.getElementById('contribution').value">
</form>

You need to add the value of contribution to initialDeposit.
initialDeposit += contribution;
For the other problem, you have an error in the call of the function
document.getElementById('goal').value),document.getElementById('contribution').value"
^ >>>>>>>>>>>>>>>> should go >>>>>>>>>>>>>>>>> ^
shold be
onclick="howLong(
document.getElementById('initial').value,
document.getElementById('interest').value,
document.getElementById('goal').value,
document.getElementById('contribution').value
)"
The last round bracket is closing to early.
function howLong(initial, interest, goal, added) {
var initialDeposit = parseInt(initial);
var interestInt = parseInt(interest);
var targetSaving = parseInt(goal);
var contribution = parseInt(added);
var monthCount = 0;
while (initialDeposit <= targetSaving) {
monthCount++;
initialDeposit += contribution;
}
alert(monthCount)
}
<form>
Initial Deposit:<br />
<input type="number" id="initial"><br /><br /> Interest:
<br />
<input type="number" id="interest"><br /><br /> Target savings amount:<br />
<input type="number" id="goal"><br /><br /> Monthly Contribution:<br />
<input type="number" id="contribution"><br /><br />
<input type="button" value="How Long!?" onclick="howLong(document.getElementById('initial').value,document.getElementById('interest').value,document.getElementById('goal').value,document.getElementById('contribution').value)">
</form>

Change to initialDeposit += contribution;

As other answers have pointed out initialDeposit += contribution will solve the issue, but you don't need a loop here at all:
var monthCount = Math.ceil((targetSaving - initialDeposit)/contribution);
This is presuming that the contribution is constant, of course.

You were missing += operator and interest as well.
function howLong(){
var initialDeposit = parseInt(document.getElementById('initial').value);
var interestInt = parseInt(document.getElementById('interest').value);
var targetSaving = parseInt(document.getElementById('goal').value);
var contribution = parseInt(document.getElementById('contribution').value);
var monthCount = 0;
while(initialDeposit <= targetSaving){
monthCount++;
initialDeposit += contribution + interestInt; //+= was missing and interestInt as well
}
alert(monthCount);
}
<form>
Initial Deposit:<br />
<input type="number" id="initial"><br /><br />
Interest:<br />
<input type="number" id="interest"><br /><br />
Target savings amount:<br />
<input type="number" id="goal"><br /><br />
Monthly Contribution:<br />
<input type="number" id="contribution"><br /><br />
<input type="button" value="How Long!?" onclick="howLong()">
</form>

Exclude from a for() in javascript, an Array of 'ElementByName' ending with

First of all, sorry for the post's title.
I am trying to get references from these questions:
GetElementsByName with array like name
getElementsByName: control by last partial name
How can I select an element by ID with jQuery using regex?
And more or less I understood how to proceed.
I am using this code to check all the <input> and prevent the form from being submitted if any of the field is empty:
$('form[id="insertForm"]').on("submit", function (e) {
var form = document.getElementById("insertPanel");
var inp = form.getElementsByTagName('input');
for(var i in inp){
if(inp[i].type == "text"){
if(inp[i].value == ""){
inp[i].focus();
e.preventDefault();
$("#formAlert").show(400);
break;
}
}
}
});
The "problem", is that I was asked to add an exception, and one of these <input> can be empty.
The form is similar to this, what I post here is simplified:
<form id="insertForm" >
<div id="insertPanel">
<input type="text" name="FOO1" id="FOO1" />
<input type="text" name="FOO2" id="FOO2" />
<input type="text" name="FOO3" id="FOO3" />
<input type="text" name="FOO4" id="FOO4" />
<button type="submit" name="submit" value="Submit" >Send</button>
<table id="tab_logic">
<thead>
<tr>
<th>Bar1</th>
<th>Bar2</th>
<th>Bar3</th>
<th>Bar4</th>
<th>Bar5</th>
<th>Bar6</th>
<th>Bar7</th>
<th>Bar8</th>
<th>Bar9</th>
</tr>
</thead>
<tbody>
<tr id='addr_100'>
<td>
<input type="text" name='prefs[0][FooBar_A]' />
</td>
<td>
<input type="text" name='prefs[0][FooBar_B]' />
</td>
<td>
<input type="text" name='prefs[0][FooBar_C]' />
</td>
<td>
<input type="text" name='prefs[0][FooBar_D]' />
</td>
<td>
<input type="text" name='prefs[0][FooBar_E]' />
</td>
<td>
<input type="text" name='prefs[0][FooBar_F]' />
</td>
<td>
<input type="text" name='prefs[0][FooBar_G]' />
</td>
<td>
<input type="text" name='prefs[0][FooBar_H]'/>
</td>
<td>
<input type="text" name='prefs[0][FooBar_I]' />
</td>
</tr>
<tr id='addr_101'/>
</tbody>
</table>
<a id="add_row">Add Row</a>
<a id='delete_row'>Delete Row</a>
</form>
I removed all the CSS. Kept is really simple.
I was asked to NOT check the input <input type="text" name='prefs[0][FooBar_G]' />
As you can see, it is an array, at every "add row" click, there is a jquery that adds a new row with name='prefs[1][FooBar_A]' and so on.
I tried to work on the for():
$('form[id="insertForm"]').on("submit", function (e) {
var form = document.getElementById("insertPanel");
var inp = form.getElementsByTagName('input');
var SKIP = form.querySelectorAll('input[name$="FooBar_G]"]');
for(var i in inp){
if(inp[i].type == "text"){
if(inp[i].value == ""){
if (SKIP){ console.log("Element " + SKIP.innerText + " found. "); continue; }
inp[i].focus();
e.preventDefault();
$("#formAlert").show(400);
break;
}
}
}
});
And many other versions.. failing.
Anyone knows how to make this working?

let inputs = [...document.querySelectorAll('input')]
let reg = new RegExp('FOO[0-9]', 'g')
let filtered = inputs.filter(({ name }) => name.match(reg))
console.log(filtered)
<input type="text" name="FOO1" id="FOO1" />
<input type="text" name="FOO2" id="FOO2" />
<input type="text" name="FOO3" id="FOO3" />
<input type="text" name="FOO4" id="FOO4" />
<input type="text" name='prefs[0][FooBar_A]' />
<input type="text" name='prefs[0][FooBar_B]' />
<input type="text" name='prefs[0][FooBar_C]' />
<input type="text" name='prefs[0][FooBar_D]' />
$('form[id="insertForm"]').on("submit", function (e) {
var form = document.getElementById("insertPanel")
var reg = new RegExp('FOO[0-9]', 'g')
var inputs = [...document.querySelectorAll('input')].filter(({name}) => name.match(reg))
inputs.forEach((inp, i) => {
if(inp[i].type === "text" && inp[i].value === ""){
inp[i].focus();
$("#formAlert").show(400);
}
})
});

Use querySelectorAll to exclude that input (and to shorten your code). Specifically, the :not([name$=FooBar_G\\]]) selector to exclude the one you want to keep out. It can also be used to specify the text inputs.
You can simply the selector using the *= contains selector if you know that there will not be false positives. :not([name*=FooBar_G])
$('form#insertForm').on("submit", function(event) {
var inputs = this.querySelectorAll("#insertPanel input[type=text]:not([name$=FooBar_G\\]])");
for (var i = 0; i < inputs.length; i++) {
if (!inputs[i].value) {
inputs[i].focus();
event.preventDefault()
$("#formAlert").show(400);
break;
}
}
});
And to do it in a more modern way, I'd do this:
document.querySelector('form#insertForm').addEventListener("submit", function(event) {
const inp = Array.from(
this.querySelectorAll("#insertPanel input[type=text]:not([name$=FooBar_G\\]])")
).find(inp => !inp.value);
if (inp) {
inp.focus();
event.preventDefault()
$("#formAlert").show(400);
}
});

Some things:
1) if(SKIP) will always enter the branch as objects are truthy. You need compare sth (===)
2) If you already include such a heavy library like jquery you should use it everywhere to make it worth it
$('form[id="insertForm"]').on("submit", function (e) {
const inputs = $("#insertPanel > input").toArray();
const skip = $('input[name$="FooBar_G]"]')[0];
for(const input of inputs){
if(input === skip) continue;
if(!input.value){
input.focus();
e.preventDefault();
$("#formAlert").show(400);
break;
}
}
});

Java script hangman game issues

I've been working on a hangman game using an HTML template and javascript for a project for a class.
I am currently stuck with a few issues.
1. I am using an array to call the pictures for wrong guesses to add parts to the body in the gallows. only picture #4 shows up when 4 incorrect guesses have occurred.
2. I also have the issue that only for certain words do the buttons decide to actually work and the letter "o" never works
Any help would be greatly appreciated.
<!DOCTYPE HTML>
<html>
<head>
<title>Hangman</title>
<meta charset="utf-8">
<script type="text/javascript" language="JavaScript">
var NumberOfChances;
var theWord = "",oldString="";
var currentGuessed = "";
var value="";
var words = new Array();
words[0]="No strings attached";
words[1]="Never look back";
words[2]="Happy birthday";
words[3]="Against all odds";
words[4]="Break a leg";
words[5]="Off the beaten path";
words[6]="Good old days";
words[7]="Gold rush";
words[8]="Happy camper";
words[9]="Grin from ear to ear";
words[10]="Live long and prosper";
words[11]="Quartz watch";
words[12]="Jumping jacks";
words[13]="Income tax";
var image = new Array();
image[0] = '<img src="image0.jpg" align ="left" width="415" height="496">';
image[1] = "<img src='image1.jpg' align ='left' width='415' height='496'>";
image[2] = '<img src="image2.jpg" align ="left" width="415" height="496">';
image[3] = '<img src="image3.jpg" align ="left" width="415" height="496">';
image[4] = '<img src="image4.jpg" align ="left" width="415" height="496">';
image[5] = '<img src="image5.jpg" align ="left" width="415" height="496">';
image[6] = '<img src="image6.jpg" align ="left" width="415" height="496">';
NumberOfChances = image.length;
function swap(image)
{
document.getElementById("images").src =image+".gif";
}
var usedLetters = new Array();
function secretWord()
{
debugger
theWord = words[Math.floor(Math.random()*51)];
for (i=0; i<theWord.length; i++)
{
currentGuessed = currentGuessed + "*";
}
document.getElementById("secretWord").value = currentGuessed;
debugger
}
function gameProcess()
{
currentGuessed ="";
secretWord();
NumberOfChances=0;
document.getElementById("lives").value = NumberOfChances;
startImage = image[0];
}
function turn(letterGuessed)
{
debugger
value = oldString = "";
var correctGuess = false;
for (i=0; i<theWord.length; i++)
{
if (theWord.charAt(i) == letterGuessed)
{
value = value + letterGuessed;
currentGuessed = currentGuessed.replace(oldString + "*",value);
oldString = value;
correctGuess=true;
}
else
{
if(currentGuessed.charAt(i) == "*")
{
value = value + '*';
oldString = oldString + "*";
}
else
{
value = value + currentGuessed.charAt(i);
oldString = oldString + currentGuessed.charAt(i);
}
}
}
if (!correctGuess)
{
NumberOfChances++;
swap("image" + NumberOfChances );
if (NumberOfChances==6)
{
alert("You Lost!");
document.getElementById("secretWord").value = theWord;
theWord = "";
currentGuessed = "";
}
document.getElementById("lives").value = NumberOfChances;
if(correctGuess != 0)
{
takeChance();
}
}
win();
}
function win()
{
var winCount = 0;
for(var i = 0;i<theWord.length;i++)
{
if(currentGuessed.charAt(i) == "*")
{
winCount++;
}
document.getElementById("secretWord").value = currentGuessed;
}
if(winCount == 0 && currentGuessed != "")
{
alert("yay, you win!");
}
}
</script>
</head>
<body>
<H1>Lets play Hangman</H1>
<form name="userGuessForm" id="form1">
<div id="Image"><img src="image0.gif" align ="left" width="415" height="496" id="images"/></div>
<div id="wordDisplay"></div>
This is the Secret Word<br /><input id="secretWord" type="text" value="currentGuessed" />
<br />
<input id="letters" type="button" name="a" value="a" onClick="turn('a');">
<input id="Button1" type="button" name="b" value="b" onClick="turn('b');">
<input id="Button2" type="button" name="c" value="c" onClick="turn('c');">
<input id="Button3" type="button" name="d" value="d" onClick="turn('d');">
<input id="Button4" type="button" name="e" value="e" onClick="turn('e');">
<input id="Button5" type="button" name="f" value="f" onClick="turn('f');">
<input id="Button6" type="button" name="g" value="g" onClick="turn('g');">
<input id="Button7" type="button" name="h" value="h" onClick="turn('h');">
<input id="Button8" type="button" name="i" value="i" onClick="turn('i');">
<input id="Button9" type="button" name="j" value="j" onClick="turn('j');">
<input id="Button10" type="button" name="k" value="k" onClick="turn('k');">
<input id="Button11" type="button" name="l" value="l" onClick="turn('l');">
<input id="Button12" type="button" name="m" value="m" onClick="turn('m');">
<input id="Button13" type="button" name="n" value="n" onClick="turn('n');">
<input id="Button14" type="button" name="o" value="o" onClick="turn('o');">
<input id="Button15" type="button" name="p" value="p" onClick="turn('p');">
<input id="Button16" type="button" name="q" value="q" onClick="turn('q');">
<input id="Button17" type="button" name="r" value="r" onClick="turn('r');">
<input id="Button18" type="button" name="s" value="s" onClick="turn('s');">
<input id="Button19" type="button" name="t" value="t" onClick="turn('t');">
<input id="Button20" type="button" name="u" value="u" onClick="turn('u');">
<input id="Button21" type="button" name="v" value="v" onClick="turn('v');">
<input id="Button22" type="button" name="w" value="w" onClick="turn('w');">
<input id="Button23" type="button" name="x" value="x" onClick="turn('x');">
<input id="Button24" type="button" name="y" value="y" onClick="turn('y');">
<input id="Button25" type="button" name="z" value="z" onClick="turn('Z');"><br />
Number of Tries (6): <input id="lives" type="text" value="0" onfocus="lives.blur();" SIZE=2>
<input type="button" name="submit" value=" Start Over " onClick="gameProcess()">
<input type="button" name="end" value=" END " onClick="gameEnd()"><br />
</form>
</body>
</html>

Your images aren't working correctly because you're using an array as a string.
document.getElementById("images").src =image+".gif";
should be
document.getElementById("images").src ="image"+NumberOfChances+".gif";
otherwise, what you're doing is taking the html of all the images and setting it as the src attribute for your image.
<img src="<img src="image0.jpg" align ="left" width="415" height="496">, <img src="image1.jpg" align ="left" width="415" height="496">, <img src="image2.jpg" align ="left" width="415" height="496">..." id="images"> This isn't what you want!
And also, I think you've got your jpgs and gifs mixed up. Check your file extensions.
Also, do you have 50 words that you aren't showing here? Your array contains 13, but later you write
theWord = words[Math.floor(Math.random()*51)];
And that seems to suggest you have one less than 51, or 50, words.
In your letterGuessed function, I don't think you're quite grasping the concept of for loops. What you seem to be thinking is that a new iteration happens each time you call the function, but that isn't the case. Rather, the for loop goes through the entire word each time you call the function with the one letter you guessed. So unless every single letter in the word is o, if you guess the letter o, you'll get one point for every o in the word, and -1 chance for every character that isn't o, which isn't what you want. Ditch the for loop and just use i++ for each time the function runs.

function swap(image)
{
document.getElementById("images").src =image+".gif";
}
Try changing gif to jpg

if (!correctGuess)
{
NumberOfChances++;
swap(image[NumberOfChances]);

Repeating Element in Javascript Code

I have created a .hta form that connects to an excel file. The data entered is pasted in the spreadsheet. I have two problems with this code and I can't seem to figure out what I am doing wrong.
<html>
<head>
<script>
function test() {
var excel = new ActiveXObject("Excel.Application");
excel.visible = true;
var wb = excel.Workbooks.Open("C:\\Users\\Dane\\Desktop\\1.xlsx");
var optionValue;
var s = Form1.select1;
var data = [];
var sCell = wb.sheets("sheet1").cells(1,1).currentregion.offset(1);
data.push(Form1.text1.value);
data.push(Form1.text2.value);
data.push(Form1.text3.value);
data.push(Form1.text4.value);
data.push(s.options[s.selectedIndex].text);
data.push(Form1.text5.value);
data.push(Form1.text6.value);
data.push(Form1.text7.value);
for(var i=0;i<Form1.option1.length;i++) {
if(Form1.option1[i].checked){
data.push(Form1.option1[i].value);
break;
}
}
for(var i=0; i<data.length;i++) {
sCell.offset(0,i) = data[i];
}
for(var i=0;i<Form1.option2.length;i++) {
if(Form1.option2[i].checked){
data.push(Form1.option2[i].value);
break;
}
}
for(var i=0; i<data.length;i++) {
sCell.offset(0,i) = data[i];
}
wb.close(true);
}
</script>
</head>
<body>
<form name="Form1">
<p>
Entry 1: <input name="text1" type="text" size="10" /><br />
Entry 2: <input name="text2" type="text" size="10" /><br />
Entry 3: <input name="text3" type="text" size="10" /><br />
Entry 4: <input name="text4" type="text" size="10" /><br />
Selection 1: <select name="select1">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
<option value="6">F</option>
</select> <br />
Entry 5: <input name="text5" type="text" size="10" /><br />
Entry 6: <input name="text6" type="text" size="10" /><br />
Entry 7: <input name="text7" type="text" size="10" /><br />
Question 1<br />
Yes : <input type="radio" name="option1" value="Yes"><br />
No : <input type="radio" name="option1" value="No"><br />
N/A : <input type="radio" name="option1" value="N/A"><br />
Question 2<br />
Yes : <input type="radio" name="option2" value="Yes"><br />
No : <input type="radio" name="option2" value="No"><br />
N/A : <input type="radio" name="option2" value="N/A"><br />
<input type="button" value="Save to Excel" onclick="test()" />
</form>
</body>
Problems:
The last radio button value is repeated a few times at the end of the spreadsheet.
When the user uses the program a second time, the previous data is overwritten.
Sample to download (make sure to change the file path):
http://www.filedropper.com/new_3

I believe the second problem is caused because this is in your code twice:
for(var i=0; i<data.length;i++) {
sCell.offset(0,i) = data[i];
}
Once you have your array of data, you shouldn't have to cycle through it twice.
For the first problem, I believe it's created by this line:
var sCell = wb.sheets("sheet1").cells(1,1).currentregion.offset(1);
You are saying in essence "select this region here" not "start at this region." Unfortunately, I don't know the code for what you need, but that's my interpretation.