-1

I'm new to coding but I am using template literals in a project using css variables. this example sets all the variables in one shot inside a function. this is referring to inputs which all have an eventlistener on them.

document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);

I want to set another rule for a span to display the values. right now I am doing each one individually like this.

heightDisplay.innerHTML = height.value + 'px';
widthDisplay.innerHTML = width.value + 'px';

all the span's ids will be " this.name + 'Display' " I want to right a rule that sets them all at once using the literals(similar to the rule that sets the variables) instead of writing 30 lines of code.

I can't figure out the syntax to add Display on there and i don't know where to put the back ticks.

I assume this is possible, since pretty much everything in Javascript is. Thanks for your time.

benjaminadk
  • 468
  • 6
  • 18

1 Answers1

0

I assume that you have an iteration where this Code-Line is Executed:document.documentElement.style.setProperty(--${this.name}, this.value + suffix);

In this Iteration you can set the Values of your spans like this:

var Span = document.querySelector(`[id*= ${this.name}]`);

Span.innerHTML =  this.value+ "px";

Edit: The querySelector - function gets a css-selector as a parameter. the [] - Brackets is a css selector that gets an element with an atribute (in this case id) and a value (this.name). The *= between them means, that you can select an element that has a substring in the value of the atribute.

Matthias Gwiozda
  • 505
  • 5
  • 14
  • Thanks. It works. I don't quite get it. We capitalize Span why? And I haven't use [] inside a literal before or an *. – benjaminadk Jun 02 '17 at 22:27
  • I'm going to have a problem. I have some spans I want to make that will have 'deg' as a label or no label at all. could I enter in the labels like 'px' manually and instead of `Span.innerHTML` use `Span.prepend`?? – benjaminadk Jun 02 '17 at 22:31
  • so you want to have in special cases a "deg" instead of a "px" ? Then you need to add a if-statement before this code-line:`Span.innerHTML = this.value+ "px";` then you have to decide whether you want a "px" or a deg. Example: `if(degInsteadOfPX){Span.innerHTML = this.value+ "deg"; }else{Span.innerHTML = this.value+ "px";}` Note that you need to set `degInsteadOfPX` somehow and decide whether you want a deg or a px in your span. Btw can you mark my answer as correct (i answered your question correctly :) ) – Matthias Gwiozda Jun 03 '17 at 08:14
  • thanks. i ended up using the + suffix instead of 'px'. I forgot i had already sort of solved this problem. what i am curious about is the captialization of Span (why) and the * after id(are the [] a type of conditional that matches the span id with this.name with the * meaning anything can come after such as Display in this case)?? – benjaminadk Jun 03 '17 at 08:43
  • I edited the answer. For more Information look on this page: https://www.w3schools.com/cssref/sel_attr_contain.asp – Matthias Gwiozda Jun 03 '17 at 10:19
  • Are all your questions answered or can i help with other problems? – Matthias Gwiozda Jun 04 '17 at 08:11
  • I am good to go. You helped me out big time for that feature I wanted to add. – benjaminadk Jun 04 '17 at 19:30
  • glad to hear. You could mark my answer as "best answer" if you want to – Matthias Gwiozda Jun 06 '17 at 18:12