Hello Folks,
I’m working through the javaScript component of the bootcamp. As well as using the built-in editor, I’m using a separate editor so I can learn how to get outputs to work in the main window or a browser rather than that built-in black console thing, which isn’t teaching me how to output.
So, I was going through the Accessing/Updating Objects challenges. What I noticed was that when an object is updated, the actual object (in the code) doesn’t seem to change, as reloading the screen shows the original values again. My assumption is that updates and additions are only temporary for time the function is invoked. So, how would these objects be permanently altered? Would they be somehow output to a database input routine?
I wanted to have a go at employing different parts of what I learnt about objects.
Here’s what I coded:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Accessing JavaScript Objects with a Variable</title>
<style>
.red {color: red;}
</style>
</head>
<body>
<h2>Department worked for</h2>
<p id="emps"></p>
<p id="newDept"></p>
<p id="salary"></p>
<script>
//// Create a simple employees object ////
var myEmps = {
Lee: "Info Tech",
George: "Languages",
Lucas: "Filmography"
};
var name = "Lucas";
var depts = myEmps[name];
document.getElementById("emps").innerHTML=("<p>Your employee, "+ name +", used to work in " + depts + ".");
//// Change the employee's department ////
myEmps.Lee = "All film stuff";
myEmps.George = "Savage Slaths!";
myEmps.Lucas = "Slothral's Breakfast Club";
var depts = myEmps[name];
document.getElementById("newDept").innerHTML=("<p>" +name +", now works in <span class='red'><em>" + depts + "</em></span>.");
//// Now add a new property to the object ////
myEmps.salaryHigh="Too much!";
var salary="salaryHigh";
var sal = myEmps[salary];
document.getElementById("salary").innerHTML=("<p>Now, " + name +"'s salary is " + sal +".");
</script>
</body>
</html>