Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Banned
    Join Date
    Oct 2010
    Posts
    115
    Thanks
    30
    Thanked 0 Times in 0 Posts

    Many simple questions (maintly to do with user input)

    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.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by maxhudson View Post
    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;
    }


    Quote Originally Posted by maxhudson View Post
    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:-

    Code:
    <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.

  • Users who have thanked Philip M for this post:

    maxhudson (12-19-2010)

  • #3
    Banned
    Join Date
    Oct 2010
    Posts
    115
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Alright.

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

    <html>
    <head>


    Code:
    <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]='';
    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?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by maxhudson View Post
    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;

  • Users who have thanked Philip M for this post:

    maxhudson (12-19-2010)

  • #5
    Banned
    Join Date
    Oct 2010
    Posts
    115
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Question 1:

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

    Code:
    <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>

  • #6
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts
    Hi
    Why doesnt this change my background color when it is clicked?
    GetElementById / getElementById

    == means equals (equal to)
    = means assign

    could also try this.

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

  • Users who have thanked low tech for this post:

    maxhudson (12-20-2010)

  • #7
    Banned
    Join Date
    Oct 2010
    Posts
    115
    Thanks
    30
    Thanked 0 Times in 0 Posts
    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
    Code:
     document.getElementById("output").value = mot.join("") + cpu.join("");
    i want something like
    Code:
    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:

    Code:
    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"
    }
    }
    Last edited by maxhudson; 12-20-2010 at 06:59 AM.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    What is a "panel type thing"?

    Code:
    <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.

  • Users who have thanked Philip M for this post:

    maxhudson (12-20-2010)

  • #9
    Banned
    Join Date
    Oct 2010
    Posts
    115
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    What is a "panel type thing"?


    One more time:-
    = is assignment
    == is comparison.
    Code:
    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...

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Why have you disregarded the perfectly good code offered by low-tech? You could also use CSS.

    Code:
    <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:-

    Code:
    <script type = "text/javascript">
    function motHide() {
    var el = document.getElementById("motbutton");
    el.className = (el.className == "housebuttonA") ? "housebuttonB" : "housebuttonA"; 
    }
    </script>
    Last edited by Philip M; 12-20-2010 at 08:30 AM.

  • #11
    Banned
    Join Date
    Oct 2010
    Posts
    115
    Thanks
    30
    Thanked 0 Times in 0 Posts
    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?

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by maxhudson View Post
    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.

    Code:
    <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).
    Last edited by Philip M; 12-20-2010 at 05:29 PM.

  • #13
    Banned
    Join Date
    Oct 2010
    Posts
    115
    Thanks
    30
    Thanked 0 Times in 0 Posts
    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.

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by maxhudson View Post
    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.

  • #15
    Banned
    Join Date
    Oct 2010
    Posts
    115
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Then how do I make 1 buttons click call both the functions?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •