JavaScript JavaScript and the DOM Getting a Handle on the DOM Select a Page Element By Its ID

Kevin Ohlsson
Kevin Ohlsson
4,547 Points

experiement with app help

I dont know how to make template literal not pring as string

<!DOCTYPE html>
<html>

  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body id="bodyPage">
    <h1 id="heads"> js hello</h1>

    <input type="what" id="myTextInput">
    <button id="changeColorButton">change headline color</button>

    <input type="text" id="myStyleInput">
    <button id="changeStyleButton">Change Style</button>

    <button id="resetColorButton">Default color</button>



    <script src="app.js"></script>
  </body>
</html>

js

const myHeading = document.getElementById("heads");
const changeColorButt = document.getElementById("changeColorButton");
const textInput = document.getElementById("myTextInput");
const resetColorButton = document.getElementById("resetColorButton");
let styleInput = document.getElementById("myStyleInput");

changeColorButt.addEventListener("click", () => {
  myHeading.style.color = textInput.value;
});

resetColorButton.addEventListener("click", () => {
  myHeading.style.color = "black";
});

changeStyleButton.addEventListener("click", () => {
  return `myHeading.style.${styleInput.value}`
});

input in changeStyleButton

direction = "rtl"

in console:

  `myHeading.style.${styleInput.value}` 

3 Answers

Andrew Hinkson
seal-mask
.a{fill-rule:evenodd;}techdegree
Andrew Hinkson
Full Stack JavaScript Techdegree Student 20,022 Points

Yea sorry my bad wasn't paying attention. So yea from what I am seeing you can't dynamically change dot notation with literals. One way I found that you can make your idea work is this:

Adding a button to your html

<!DOCTYPE html>
<html>

  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body id="bodyPage">
    <h1 id="heads"> js hello</h1>

    <input type="what" id="myTextInput">
    <button id="changeColorButton">change headline color</button>

    <input type="text" id="myStyleInput">
    <input type="text" id="myStyleValue">  // this one right here
    <button id="changeStyleButton">Change Style</button>

    <button id="resetColorButton">Default color</button>



    <script src="app.js"></script>
  </body>
</html>

Then adding this to your js would make it to where you could dynamically change your code to anything your wanting i would imagine within reason :)

changeStyleButton.addEventListener("click", () => {
  var style = document.getElementById("myStyleInput").value;
  var value = document.getElementById("myStyleValue").value;
  myHeading.style[thing] = style;
});

In the first box type what you want to do like direction or whatever then the value you want to change it too in the second.

Im still learning all this so I am hoping that this is helping.

Joel Mora
Joel Mora
9,563 Points

Andrew Hinkson hit it right on the dot I believe. I also decided to try and create a flexible style changing input field and came up with almost the exact same solution as Mr. Hinkson.

I am posting my code below just because I already have it so, why not? Maybe it might help to have 2 perspectives.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>

    <!--This Text field will allow you to select type of style (ex. direction, color, backgroundColor, ect..-->
    <label for="myStyleSelection">Select which style you would like to change on the header:</label>
    <input type="text" id="myStyleSelection"><br>

    <!--This Text field will allow you to select a value for the style you previously selected (ex. 'rtl' (if you entered direction in the previous textField-->
    <label for="myStyleValue\">Select what value you would like to change your style to instead:</label>
    <input type="text" id="myStyleValue">

    <button id="myButton">Change style of Heading</button>
    <script src="app.js"></script>
  </body>
</html> 

Javascript:

const myHeading = document.getElementById('myHeading');
const myButton = document.getElementById('myButton');
const myStyleSelection = document.getElementById('myStyleSelection');
const myStyleValue = document.getElementById('myStyleValue');

myButton.addEventListener('click', () =>{
  myHeading.style[myStyleSelection.value] = myStyleValue.value;
})
Andrew Hinkson
seal-mask
.a{fill-rule:evenodd;}techdegree
Andrew Hinkson
Full Stack JavaScript Techdegree Student 20,022 Points

I dont believe you can actually use a literal with dot notation. I could be wrong but the only way I could get your code to work was to do this:

changeStyleButton.addEventListener("click", () => {
  var style = document.getElementById("myStyleInput").value;
  myHeading.style.direction = style;
});

I know it doesnt answer the question but hopefully this helps.

Kevin Ohlsson
Kevin Ohlsson
4,547 Points

thank you Andrew!

Your code changes the direction property, right?

If i wanted to change whatever comes after style, is that possible? Say i wanted to instead of "direction" change "textAlign" property in the same field.

myHeading.style.${changeToAnyStyleProperty}

Below snippet did not work. I dont understand why it works with the color property. Is style not a property too?

changeStyleButton.addEventListener("click", () => {
  myHeading.style = styleInput.value
});

maybe not possible to do this dynamically without functions