...

View Full Version : Many simple questions (maintly to do with user input)



maxhudson
12-19-2010, 08:06 AM
I have a bunch of questions and know very little javascript. (I come from a world of Visual basic)

I would spend the time to learn a lot more about it, but i dont have that time since this program needs to be done by tuesday.

Question 1:

Do i save the text from textbox a user inputs to a variable like this when a submit button is clicked?:

var tb1=textbox1.text

Question 2:

To activate or call that variable on the click of a button do i do this?:

<form>
<input type="button" value="text" onlick="tb1"/>
</form>

I have a bunch of questions, but i will ask them later when i know how to state them better.

Philip M
12-19-2010, 09:55 AM
Question 1:

Do i save the text from textbox a user inputs to a variable like this when a submit button is clicked?:

var tb1=textbox1.text



Only if a function is called by the submit button or at some other stage.

function saveme() {
var tb1 = document.formname.textbox1.value;
}




Question 2:

To activate or call that variable on the click of a button do i do this?:

<form>
<input type="button" value="text" onlick="tb1"/>
</form>



No, you must call a function. onclick - not onlick! :)
You seem a bit confused. The value of a button is the text that appears in it, such as "Click Here".

function getme() {
theValueOfSomething = tb1;
}

You need to distinguish between an object and the value of that object.

To pull it together:-


<form name = "myform">
Enter some text here <input type = "text" name = "textbox1" onblur = "saveme()">
<br>
<input type = "button" value = "Click Here" onclick = "getme()">
</form>

<script type = "text/javascript">

var tb1; // the variable must be global if it is to be referenced by two functions;
function saveme() {
tb1 = document.myform.textbox1.value;
alert ("The value of tb1 is " + tb1);
}
function getme() {
alert ("The value of tb1 is " + tb1);
}

</script>

While you may certainly ask questions in this forum you would do best to use w3schools to give you a basic grounding.

maxhudson
12-19-2010, 08:08 PM
Alright.

I did a little more looking and here is what I have now:

<html>
<head>



<script>
var mot=new Array();
mot[0]="Motherboard - "
mot[1]=''

var tb1
var tb2
var tb3
var tb4

function addmot() {
tb1 = document.input.tb1s.value;
tb2 = document.input.tb2s.value;
if (document.input.tb3s.value != ""){tb3 = " (" + document.input.tb3s.value + ")"}
else{tb3 = ""}
if (document.input.tb4s.value != ""){tb4 = " - $" + document.input.tb4s.value + " "}
else{tb4 = ""}
mot[2]=tb2;
mot[4]=tb1
mot[6]=tb3
mot[7]=tb4
mot[5]=' ('
mot[3]=')';
alert(mot.join(""));
}
</script>

</head>
<body>

<form name="input">

<input type="text" name="tb1s" class="mots"/>
<input type="text" name="tb2s" class="link1s" />
<input type="text" name="tb3s" class="q1"/>
<input type="text" name="tb4s" class="p1" />

<input type="button" class="motb" value="Motherboard" onclick="addmot()"/>

<input type="listarea" value="" name="output" />

</form>
</body>


This is basically a summary (my actual code is somewhere around 1500 lines, so im not just going to paste it.

What I want to do is this:

make the value of "output" which is a listarea equal to "mot", but i only want to do this when "motherboard" is clicked. how do i do this?

Philip M
12-19-2010, 08:35 PM
What I want to do is this:

make the value of "output" which is a listarea equal to "mot", but i only want to do this when "motherboard" is clicked. how do i do this?

First of all,

<input type="listarea" value="" name="output" />
There is no such thing as a "listarea". Do you mean a textarea?

<textarea name = "output" id = "output" rows = "6" cols = "50"></textarea

mot is an array but you can use something like var motJoined = mot.join("");
Then:
document.getElementById("output").value = motJoined;

maxhudson
12-19-2010, 11:28 PM
Question 1:

Why doesnt this change my background color when it is clicked?


<html>

<head>

<style type="text/css">
.motb{
color:#000000;
font: 9pt arial;
background-color: white;
border: 1px solid;
border-color: ##5E5E5E #9E9E9E #9E9E9E #5E5E5E;
}
</style>

<script type="text/javascript">
function motHide() {
if (document.GetElementById("motbutton").backgroundColor == white){
document.GetElementById("motbutton").backgroundColor == gray
}
else if (document.GetElementById("motbutton").backgroundColor == gray){
document.GetElementById("motbutton").backgroundColor == white
}
}
</script>


</head>


<body>

<form name="button">
<input type="button" id="motbutton" name="motb" class="motb" value="Motherboard" onclick="motHide()"/>
</form>

<textarea id="output" name="output" rows="15" cols="60" class="output"></textarea>

</body>


</html>

low tech
12-20-2010, 06:30 AM
Hi

Why doesnt this change my background color when it is clicked?

GetElementById / getElementById

== means equals (equal to)
= means assign

could also try this.


<script type="text/javascript">
function motHide() {
var el=document.getElementById("motbutton");
el.style.backgroundColor = (el.style.backgroundColor=="gray") ? "white" : "gray";
}
</script>

LT

maxhudson
12-20-2010, 07:03 AM
Thanks a ton both of you.

Another question:

how do i force an "enter" in a textarea?

basically, i have an array and i want to do something like this and write it to a textarea:

instead of
document.getElementById("output").value = mot.join("") + cpu.join(""); i want something like
document.getElementById("output").value = mot.join("") + "line break here" + cpu.join("")

How do i do this?



Also:

how do i add items and save them to a panel type thing?

basically, i want to be able to set the visibility of something to true or false, depending on a button click. i want that something to be multiple html objects though.



Allllllllllllllso...

why doesnt this work? i tried to follow your example:


function motHide() {
if (document.getElementById("motbutton").style.backgroundColor == "#FFFFFF"){
document.getElementById("motbutton").style.backgroundColor == "#696969"
}
else if (document.getElementById("motbutton").style.backgroundColor == "#696969"){
document.getElementById("motbutton").style.backgroundColor == "#FFFFFF"
}
}

Philip M
12-20-2010, 08:23 AM
What is a "panel type thing"?


<textarea id = "ta1" rows = "6" cols = "40"></textarea>

<script type = "text/javascript">
sentence1 = "Good";
sentence2 = "Morning";
sentence3 = "Everybody!"
fullSentence = sentence1 + "\n" + sentence2 + "\n" + sentence3;
document.getElementById("ta1").value = fullSentence;
</script>

One more time:-
= is assignment
== is comparison.

maxhudson
12-20-2010, 08:38 AM
What is a "panel type thing"?


One more time:-
= is assignment
== is comparison.


function motHide() {
if (document.getElementById("motbutton").style.backgroundColor == "#FFFFFF"){
document.getElementById("motbutton").style.backgroundColor = "#696969"
}
else if (document.getElementById("motbutton").style.backgroundColor == "#696969"){
document.getElementById("motbutton").style.backgroundColor = "#FFFFFF"
}
}
but this code doesnt work either...

Philip M
12-20-2010, 09:14 AM
Why have you disregarded the perfectly good code offered by low-tech? You could also use CSS.


<style = "text/css">
.housebuttonA {
background-color: #FF0000;
}
.housebuttonB {
background-color: #0000FF;
}

</style>

<input type = "button" id = "motbutton" value = "motbutton" class = "housebuttonA" onclick = "motHide()">

<script type = "text/javascript">
function motHide() {
if (document.getElementById("motbutton").className == "housebuttonA") {
document.getElementById("motbutton").className = "housebuttonB";
}
else if (document.getElementById("motbutton").className == "housebuttonB"){
document.getElementById("motbutton").className = "housebuttonA";
}
}
</script>

Or if you are into ternary:-


<script type = "text/javascript">
function motHide() {
var el = document.getElementById("motbutton");
el.className = (el.className == "housebuttonA") ? "housebuttonB" : "housebuttonA";
}
</script>

maxhudson
12-20-2010, 05:17 PM
I would have used, it but i couldn't get it to work and didn't understand it really.

Could someone answer my earlier question about grouping html objects so that i can set visibility of the group instead of each individual object?

Philip M
12-20-2010, 06:16 PM
I would have used, it but i couldn't get it to work and didn't understand it really.
Could someone answer my earlier question about grouping html objects so that i can set visibility of the group instead of each individual object?

I do hope that we are reaching the end of this thread! If you did not understand the previous posts I fear that you will not understand this one either.


<style = "text/css">
.housebuttonA {
background-color: #FFFF00;
}
.housebuttonB {
background-color: #00FFFF;
}

</style>

<input type = "button" id = "motbutton1" value = "motbutton1" class = "housebuttonA" onclick = "motHide()">
<input type = "button" id = "motbutton2" value = "motbutton2" class = "housebuttonA">
<br><br>
<input type = "text" id = "txt1" class = "housebuttonA">
<br><br>
<textarea id = "txtarea1" rows = "6" cols = "20" class = "housebuttonA"></textarea>

<script type = "text/javascript">
var buttonClass = "housebuttonA"
function motHide() {
var classMembers = document.getElementsByClassName(buttonClass);
for (var i = 0; i<classMembers.length; i++) {
var el = classMembers[i];
el.className = (el.className == "housebuttonA") ? "housebuttonB" : "housebuttonA";
}
if (buttonClass == "housebuttonB") {buttonClass = "housebuttonA"}
else {buttonClass = "housebuttonB"}
}


document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
}

</script>

Obviously you can use the same script to make the elements' display block or none (or visibility visible/hidden).

maxhudson
12-20-2010, 06:43 PM
I figured out how to make it set visibility instead of colors, but i dont understand how to add more then one class name.

Basically, i want to be able to hide two different elements with two different class names.

Philip M
12-20-2010, 07:03 PM
I figured out how to make it set visibility instead of colors, but i dont understand how to add more then one class name.

Basically, i want to be able to hide two different elements with two different class names.

So use two different scripts.

maxhudson
12-20-2010, 07:46 PM
Then how do I make 1 buttons click call both the functions?

Philip M
12-20-2010, 08:37 PM
Then how do I make 1 buttons click call both the functions?

<input type = "button" value = "Click Me" onclick = "functionOne(); functionTwo()">

maxhudson
12-20-2010, 11:45 PM
Ahh thank you.

I have yet another question :)

basically, all I need to know is how to take the text from a textbox and turn it into an integer. i need to make sure that it is a number so ill need something like this:


var motq = an integer
var motqID = document.getElementById("motqinput") //where motqinput is a text box

if(if motqID.value == an integer){
motq = motqID.value
}
else{
motq = ""
}

I would like to do this, but i dont know how to write the integer part and don't understand what w3schools is saying and dont even know if the other parts of the code are right.

Thanks

Old Pedant
12-20-2010, 11:55 PM
var motq = 731;
var newval = parseInt( document.getElementById("motqinput").value );
if ( isNaN(newval)
{
motq = ""; //??? or whatever ...or leave it alone???
} else {
motq = newval;
}

maxhudson
12-21-2010, 12:18 AM
Thanks. Just wondering: is there any way to say "nothing"? Like var bla = nothing?

Old Pedant
12-21-2010, 12:27 AM
var blah = null; // equivalent of VB/VBScript's NOTHING keyword



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum