Need Help With a Small Javascript Project

Pseudonym_ · 08-25-2012, 02:26 AM

I am working on a small Javascript based project for someone, but I have come to a standstill. I need to find a way to add a scroll bar to my output boxes. I borrowed my output box function from my old JS teacher(And before anyone asks, I didn't steal it. He let me use it.), so I don't really how to mold it. It would help if I was better in this language, but I only had basic JS training. Any and all help is much appreciated.

Code:

function Createoutput(name, width, height) {
	Print(name);
	var e = document.createElement('div',);
	e.style.width = width;
	e.style.height = height;
	e.style.border = 'black 1px solid';
	document.body.appendChild(e,);
	return e;
}

Logic Ali · 08-25-2012, 02:47 AM

Try

Code:

function Createoutput(name, width, height) {
	Print(name);
	var e = document.createElement('div',);
	e.style.width = width;
	e.style.height = height;
	e.style.border = 'black 1px solid';
        e.style.overflow = 'scroll';
	document.body.appendChild(e);
	return e;
}

Pseudonym_ · 08-25-2012, 02:49 AM

Awesome! I can't thank you enough for that!

jmrker · 08-25-2012, 02:54 AM

This is just a SWAG about what you are trying to do ...

Code:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title> Untitled </title>
<script type="text/javascript">
function Createoutput(elemName, width, height) {
//	Print(name);
	var e = document.createElement('div');
        e.name = elemName;
        e.id = elemName;
	e.style.width = width;
	e.style.height = height;
	e.style.border = 'black 1px solid';
        e.style.overflow = 'scroll';
        e.innerHTML = 'This is some sample display';
	document.body.appendChild(e);
//	return e;
}
function AddToOutput(IDS,msg) {
  document.getElementById(IDS).innerHTML += msg;
}
</script>

<style type="text/css">

</style>
</head>
<body>
<button onclick="Createoutput('divBox','200px','100px')">Create Box</button>
<button onclick="AddToOutput('divBox',
  '<p>This is some additional information<p>It should be long enough to cause a scroll arrow')">Add Info</button>
</body>
</html>

yoyodress · 08-25-2012, 10:42 AM

thanks for your help. i need this js also.

Pseudonym_ · 08-26-2012, 12:35 AM

Thanks for the help guys, I really needed to figure that out. But now I have a new problem.

Code:

function Write(output, text) {
	output.innerHTML += text;
}
function WriteLine(output, text) {
	Write(output, text + '<br>');
}
var area= {
1 : "ExampleText",
2 : "MoreExampleText",
3 : "EvenMoreExampleText"
}
var aNumber = 1;
function Examine() {
	WriteLine(output,area.aNumber);
}

I'm trying to access the strings provided in the object by using a variable representing the specific number representing said string. I know this probably isn't possible, but if anyone knows a way to do this a different way, please tell me.

jmrker · 08-26-2012, 02:43 AM

I'm not sure why you would want to use an associated array for this task
instead of just a normal array. There is more to be gained using a normal
array than trying to bypass the element reference.

But if you really must accomplish this task, you could do this,
but it is not the most efficient way to do it.

Code:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<head>
<title> Untitled </title>

<script type="text/javascript">
function Write(output, text) { document.getElementById(output).innerHTML += text; }
function WriteLine(output, text) { Write(output, text + '<br>'); }
function Examine(output,item) { WriteLine(output,area[item]); }

var area= {
   'n1': "Example Text",
   'n2': "More Example Text",
   'n3': "Even More Example Text"
}
</script>

</head>
<body>
<button onclick="Examine('divArea','n1')">Examine 1</button>
<button onclick="Examine('divArea','n2')">Examine 2</button>
<button onclick="Examine('divArea','n3')">Examine 3</button>
<div id="divArea"></div>
</body>
</html>

Pseudonym_ · 08-26-2012, 04:32 PM

Well, I'm not a JavaScript genius. I only had a couple of semesters worth of basic JS in high school, so I was trying to use what I know. I guess that I should brush up on some other methods though... Thanks for the help!

jmrker · 08-26-2012, 07:35 PM

Same idea, different execution ...

Code:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<head>
<title> Untitled </title>

<script type="text/javascript">
function Write(output, text) { document.getElementById(output).innerHTML += text; }
function WriteLine(output, text) { Write(output, text + '<br>'); }
function Examine(output,item) { WriteLine(output,area[item]); }
function showAll(IDS) {
  for (var i=0; i<area.length; i++) { WriteLine(IDS,'<br>'+area[i]); }
  Write(IDS,'<br>');
}

var area= [
   "Example Text",
   "More Example Text",
   "Even More Example Text"
]
</script>

</head>
<body>
<button onclick="Examine('divArea',0)">Examine 1</button>
<button onclick="Examine('divArea',1)">Examine 2</button>
<button onclick="Examine('divArea',2)">Examine 3</button>
<button onclick="showAll('divArea')">Show all</button>
<div id="divArea"></div>
</body>
</html>

DaveyErwin · 08-26-2012, 08:35 PM

Quote:

Originally Posted by Pseudonym_

Thanks for the help guys, I really needed to figure that out. But now I have a new problem.

Code:

function Write(output, text) {
	output.innerHTML += text;
}
function WriteLine(output, text) {
	Write(output, text + '<br>');
}
var area= {
1 : "ExampleText",
2 : "MoreExampleText",
3 : "EvenMoreExampleText"
}
var aNumber = 1;
function Examine() {
	WriteLine(output,area.aNumber);
}

I'm trying to access the strings provided in the object by using a variable representing the specific number representing said string. I know this probably isn't possible, but if anyone knows a way to do this a different way, please tell me.

from http://es5.github.com/x11.html#x11.1.5

PropertyName :

IdentifierName
StringLiteral
NumericLiteral

so

Code:

<body>
</body>
<script>
function Write(output, text) {
	output.innerHTML += text;
}
function WriteLine(output, text) {
	Write(output, text + '<br>');
}
var area= {
1 : "ExampleText",
2 : "MoreExampleText",
3 : "EvenMoreExampleText"
}
var aNumber = 3;
function Examine() {
	WriteLine(document.body,area[aNumber]);
}
Examine()
</script>

Pseudonym_ · 08-28-2012, 02:23 AM

I really appreciate all of the help you guys have been giving me. I know that I have been asking for a lot of help, but this project was a bit harder than I anticipated. Now, is it possible to identify part of an input, rather that all of it? Also, is it possible to make the scrollbar I asked about above auto-scroll?

jmrker · 08-28-2012, 03:20 AM

Quote:

Originally Posted by Pseudonym_

I really appreciate all of the help you guys have been giving me. I know that I have been asking for a lot of help, but this project was a bit harder than I anticipated. Now, is it possible to identify part of an input, rather that all of it? Also, is it possible to make the scrollbar I asked about above auto-scroll?

Your questions are a bit vague for me.

What part of what input do you want to identify?

What are you trying to do with the scrollbar? Can you be more specific?

Pseudonym_ · 08-29-2012, 02:54 AM

Quote:

Originally Posted by jmrker

Your questions are a bit vague for me.

What part of what input do you want to identify?

What are you trying to do with the scrollbar? Can you be more specific?

Well, for the scrollbar, you have to manually press the down arrow every time the text expands past it. IS there a way to make it auto scroll? And for the input problem, imagine the input was "eat watermelon" or something like that. IS it possible to just identify the words "eat" and "watermelon" separately? So that the program can execute something each time "eat" is used, not necessarily just for the word "watermelon"?

Pseudonym_ · 08-31-2012, 12:46 AM

Oh by the way, I'm sure you wanna know what I'm making. I'm working on a Text Game for someone. I'm not sure if that's relevant, but I hope explains my awkward requests

jmrker · 08-31-2012, 03:55 AM

Quote:

Originally Posted by Pseudonym_

Well, for the scrollbar, you have to manually press the down arrow every time the text expands past it. IS there a way to make it auto scroll? And for the input problem, imagine the input was "eat watermelon" or something like that. IS it possible to just identify the words "eat" and "watermelon" separately? So that the program can execute something each time "eat" is used, not necessarily just for the word "watermelon"?

What do you mean by "auto scroll"?
Continuously scroll down to bottom? Then what? Stop? Scroll back to the top? Jump back to the top?
What does the scrolling display contain? How big is the area to be scrolled? Does the scrolling action ever stop?

The second part of splitting the input is possible. The following will split the string input into two elements of an array.
You could test for either with: if (words[0] == ?????) { foundAction(); } else { notfoundAction(); }

Code:

  var words = 'eat watermelon'.split(' ');

However, once the word eat is identified, what is to happen then? What words beside "eat" are to be identified?
What is to be executed when the identified words are found.

What have you coded so far?
Even if the game does not work, you could at least provide the layout and a general idea of the play.

Need more information to be able to respond with a coherent voice.