JavaScript help, beginner stuck on one problem

Anet390 · Jul 9, 2015

So I have been really stuck on the issue of trying to change text color. I have found a way to change text color with HTML and calling an id in a function that changes the color, but how to I get it to do that to a variable in my script that contains text (i.e. the car color red would be red colored text)

Here is the code below. The rest of it was just to help me learn and study the scoping of variables and functions and lots of notes xD

Code:

<html>
<header>
<title>Testing Variables and Scope</title>
    <!--button-->
    <button type="button" onclick="myFunction()">Try it</button>
</header>
<h2 id="color">This is an example h2</h2>
<script language="javascript">

    //this variable is defined outside a function, making it globally scoped. (global scope: All scripts     and functions on a web page can access it.)
    var global="This variable is defined outside of a function, making it globally scoped <br />";
    //global variable accessed outside of a function
    document.write ("Calling global outside a function: "+ global);
    
    function func ()
    {
    //accessing the global variable inside of a function
        document.write ("Calling global inside a function: "+ global);
    }
    //activating global function test
   func();
    
    function func2 ()
    {
    //this varuable is defined outside a function, making it locally scoped. (local scope: They can only     be accessed within the function.)
        var local="This variable is defined in a function, making it locally scoped to the function <br     />";
    //accessing the local variable inside a function
        document.write ("Calling local inside a function: "+ local);
        
    //this variable was created to test identical local variables with function 3 below
        var duplicate="this text is different and shouldn't be shown or accessed in function 3";
    }
    
    //activating local function test
    //Local variables are created when a function starts, and deleted when the function is completed.
       func2();
    
    document.write ("Calling local outside a function: N/A (ERROR) <br />");
    
    //attempting to activate a local variable outside of the function it is scoped (not possible)
    //document.write (local);
    
    //Since local variables are only recognized inside their functions, variables with the same name can     be used in different functions.   
    
    function func3 ()
    {
        var duplicate="This local variable is named the same as another local variable, but contains                 different text. <br />";
        document.write (duplicate);
    }
    //activating identical local variable test 
    func3();
    
     //Note of caution: if you declare a variable without the var keyword preceding (before) it, it         would automatically become a globally scoped variable, no matter where it is declared.
    function func4 ()
    {
        novar = "This globally scoped variable was created inside a function by removing the var tag               before defining a variable";
    }
    //activating no var tag function
    func4();
    //using globally scoped variable outside the function it was created in
    document.write (novar);
    //----------------MYFUNCTION-ChangeRed
    function myFunction()
    {    document.getElementById("color").style.color="#ff0000";
    }
    
    
    
    //providing line breaks for organization
    document.write ("<br /> <br />");
    
    document.write ("Testing Objects and Properties Below <br />");
    
    //You can apply multiple properties (name:value) to a single variable by using the following code
    var car = {type:"Ford", model:"F150", color:"Red"};
    
    //You can access a variables properties using one of the following methods (both will show the same)
    document.write ("<br /> Car Brand: "+car.type+"<br />");
    document.write ("Car Brand: "+car["type"]);
    
    //calling all properties of the car
    document.write ("<br /> Car Model: "+car["model"]);
    document.write ("<br />Car Color: "+car["color"]);
    
    //alert box
    alert("this is a test alert box");
    
</script>



</html>

SuF · Jul 9, 2015

You can do:
Code:
document.getElementById("color").style.color=someOtherVariableIHaveSet;
There are also predefined colors like "red" that you can use instead of the hex codes. See: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Anet390 · Jul 19, 2015

So I'm trying to get the archer image to appear after it says to select a class, because I want the images to be what the player clicks to assign their variable of class. The issue is I don't know how to keep HTML elements invisible or out of use until I need to call them by their ID later in the program.

I also am not sure if I used the best method of deleting the button "Start" after it is clicked. I have to return false at the very end of the start function in order for it to delete, I think, so I wasn't sure if separating the return from the variable remove is the best for formatting/coding.
Code:
<html>
<head><title>The Forgotten Treasure</title></head>
<body>
<button type="button" onclick="start();" id="button">Start</button>
    
    
<img id="myImage" src="archer.png">
<script language="Javascript">

    
function start()
    {
        var remove = document.getElementById('button');
        remove.parentNode.removeChild(remove);
        
        
    function characterinfo()
        {
        var name = prompt("Please Enter Your Name To Begin:");
        alert("Welcome "+name+". Please select a class");
        
        function selectionclass()
            {
            document.getElementById('myImage');
            }
            
            selectionclass();
        }
         
    characterinfo();
        
        return false;
    }
    
    
    
</script>  

</body>

</html>

Anet390 · Jul 20, 2015

bump.

need some help xD

Been doing work with styling in CSS. any cool tips?

Code:

/*NOTE*/
/*MULTI
LINE*/

body {
    background:#999;
    font-family: inherit;
}

h1,h2,h3,h4,h5,h6
{
    font-family: monospace;
}

.secondary
{
    color: red;
}
#orange
{
    color: orange;
}
#yellow
{
    color: yellow;
}

#green
{
    color: green;
}

#blue
{
    color: blue;
}

#purple
{
    color:purple;
}

#lessbold
{
    font-weight: 100;
}

/*NOTE: TEST BUTTON COLOR*/
input.button {
    background-color: green; 
}

input.button:hover { background-color: #FF00FF; }

SuF · Jul 20, 2015

Use CSS to make the thing not visible. I really don't know CSS at all. Also using Jquery is going to make life a lot easier since it makes a lot of shit much less annoying.

Anet390 · Jul 20, 2015

SuF said: ↑

Use CSS to make the thing not visible. I really don't know CSS at all. Also using Jquery is going to make life a lot easier since it makes a lot of shit much less annoying.
Click to expand...

What do you specialize in? I'm assuming you don't do mostly web dev because that seems hard without CSS knowledge but I could be wrong.

I'm curious to know if you were applying for a job and I was your employer, what languages would you say you are somewhat fluent in and what tasks could you perform with ease? I ask because I am still young/ish and plan on having some sort of technology job and I'm just wonder what kind of skills and unique attributes are necessary for employment and tasks found in the everyday labor force.

SuF · Jul 20, 2015

Anet390 said: ↑

What do you specialize in? I'm assuming you don't do mostly web dev because that seems hard without CSS knowledge but I could be wrong.

I'm curious to know if you were applying for a job and I was your employer, what languages would you say you are somewhat fluent in and what tasks could you perform with ease? I ask because I am still young/ish and plan on having some sort of technology job and I'm just wonder what kind of skills and unique attributes are necessary for employment and tasks found in the everyday labor force.
Click to expand...

I do full stack development but try to not do the front end stuff as much as possible and leave the annoying stuff like CSS to the more front end guy. I'm good with Java, C++, Haskell, Javascript really but I'm not great at Javascript. Its not too hard to pick up and work in whatever language though. Getting a computer science degree will open up basically everything to you as long as you are halfway decent which you seem to be.

Anet390 · Jul 22, 2015

SuF said: ↑

I do full stack development but try to not do the front end stuff as much as possible and leave the annoying stuff like CSS to the more front end guy. I'm good with Java, C++, Haskell, Javascript really but I'm not great at Javascript. Its not too hard to pick up and work in whatever language though. Getting a computer science degree will open up basically everything to you as long as you are halfway decent which you seem to be.
Click to expand...

^ ty

So I've really stuck on where to go from now. I have my HTML skills down and basic Javascript and CSS. But how do I make practical use? I've tried making little programs and games, but what's the best way to learn about the networking side and the infrastructure of computers as a whole? I am semi-well-versed in hardware and networking issues as far as the words "CPU, Memory(long-term?/Harddrive), Fan(lol), RAM (also memory)" and "DNS Servers, WEP Key, and Hotspot". Now you can see why I used the word semi-well-versed.

Regardless, I'm super interested in any information or tips you could provide regarding your jobs or new languages or anything you think would be important to a beginner.

I want to note that I'm extremely good at math and chemistry (IMO) and that maybe those could possibly help? idk.

SuF · Jul 22, 2015

Anet390 said: ↑

^ ty

So I've really stuck on where to go from now. I have my HTML skills down and basic Javascript and CSS. But how do I make practical use? I've tried making little programs and games, but what's the best way to learn about the networking side and the infrastructure of computers as a whole? I am semi-well-versed in hardware and networking issues as far as the words "CPU, Memory(long-term?/Harddrive), Fan(lol), RAM (also memory)" and "DNS Servers, WEP Key, and Hotspot". Now you can see why I used the word semi-well-versed.

Regardless, I'm super interested in any information or tips you could provide regarding your jobs or new languages or anything you think would be important to a beginner.

I want to note that I'm extremely good at math and chemistry (IMO) and that maybe those could possibly help? idk.
Click to expand...

If building large complex systems with different modular parts is what interests you learn some Java or C++ and read about design patterns. If you want to understand low level details of how computers work learn some C and direct memory management and stuff. If you like math and want to learn a very different style of programming try some Haskell. If you like more of systems management install Linux and learn Bash / Perl / Python scripting. But really install Linux and fuck around with it. If you want to do fun cool web things then keep learning Javascript and start using Jquery to learn how to manipulate the DOM some and then maybe try your hand at AngularJS (which I hate but you might really like it). Software is a god damn massive field so pick something that seems semi interesting and gun it.

mattG · Aug 19, 2015

Had to sign up when someone says use angular to a noobie lol.

First, feel free to dive into angular, it does a lot of really cool things. However I would not recommend coupling jquery with angular, in 99.9% of cases angular can and will do the job - pointless adding more overhead to your site.

If you do go down the angular route, its a BIG jump from what you're at the minute. Which is why you should continue learning vanilla js and understand the core principals of js. Also worth mentioning, if u choose angular, choose the entire mean stack, one language for front + backend. (note angular 2.0 is coming out later this year (probably) so 1.x will be outdated and probably obsolete in 2-3 years)

As for what you should do next, I'd recommend getting a glass of water and then telling us what you plan on building. Any language is fine to learn, not all languages are suited to all tasks. So decide on what you want to build and what functionality it will have, then we can help you decide which language to use and possibly which framework/library/software to use to go about it.

SuF · Aug 20, 2015

mattG said: ↑

Had to sign up when someone says use angular to a noobie lol.

First, feel free to dive into angular, it does a lot of really cool things. However I would not recommend coupling jquery with angular, in 99.9% of cases angular can and will do the job - pointless adding more overhead to your site.

If you do go down the angular route, its a BIG jump from what you're at the minute. Which is why you should continue learning vanilla js and understand the core principals of js. Also worth mentioning, if u choose angular, choose the entire mean stack, one language for front + backend. (note angular 2.0 is coming out later this year (probably) so 1.x will be outdated and probably obsolete in 2-3 years)

As for what you should do next, I'd recommend getting a glass of water and then telling us what you plan on building. Any language is fine to learn, not all languages are suited to all tasks. So decide on what you want to build and what functionality it will have, then we can help you decide which language to use and possibly which framework/library/software to use to go about it.
Click to expand...

I should have been more clear about doing Angular or Jquery. Angular is also its own language that is hacked into Javascript. I hate it and wish it would die so I don't have to write it anymore. I think it's completely terrible but lots of people like it and its not that hard to get started with simple stuff.

mattG · Aug 20, 2015

Going from document.write to working with angular services (.factory, .provider and the rather stupid .service) is a bit of a steep jump lol.

Strictly I kind of agree, angular is kind of annoying but it's not jQuery, in most websites jQuery is just better but for building single page applications angular is just superior in every regard. Gotta use the right technology to solve the problems you're given.

SuF · Aug 21, 2015

mattG said: ↑

Going from document.write to working with angular services (.factory, .provider and the rather stupid .service) is a bit of a steep jump lol.

Strictly I kind of agree, angular is kind of annoying but it's not jQuery, in most websites jQuery is just better but for building single page applications angular is just superior in every regard. Gotta use the right technology to solve the problems you're given.
Click to expand...

Angular is really its own language and it is not hard to learn if you do the tutorials and it is very popular at the moment so I don't think you really need to learn all that much more Javascript to make use of it.

mattG · Aug 24, 2015

Hmm, gotta disagree. The use cases for angular alone are out of scope for a complete beginner. There's a huge difference between using ng-repeat and fully understanding when and why you would want to use angular.

SuF · Aug 24, 2015

mattG said: ↑

Hmm, gotta disagree. The use cases for angular alone are out of scope for a complete beginner. There's a huge difference between using ng-repeat and fully understanding when and why you would want to use angular.
Click to expand...

I think most people just want to create stupid CRUD apps and angular is great to whip something together like that even if you don't understand what is going on.

Log in or Sign up

JavaScript help, beginner stuck on one problem

Anet390 Grand Master

SuF Legend

Anet390 Grand Master

Anet390 Grand Master

SuF Legend

Anet390 Grand Master

SuF Legend

Anet390 Grand Master

SuF Legend

mattG Newcomer

SuF Legend

mattG Newcomer

SuF Legend

mattG Newcomer

SuF Legend

Log in or Sign up

JavaScript help, beginner stuck on one problem

Thread Tools

Anet390 Grand Master

SuF Legend

Anet390 Grand Master

Anet390 Grand Master

SuF Legend

Anet390 Grand Master

SuF Legend

Anet390 Grand Master

SuF Legend

mattG Newcomer

SuF Legend

mattG Newcomer

SuF Legend

mattG Newcomer

SuF Legend