Javascript: can not set property style Opacity, TypeError: Cannot read property 'style' of undefined

Question

I have the following code. I added the last line, and the var mytest = on line 3, and want to set the opacity to 0.3

var wrapper = document.createElement('div');
wrapper.classList.add('hotspot');
var mytest = wrapper.classList.add('info-hotspot');
mytest.style.opacity = 0.3;

Unfortunately getting the following error on line 4.

TypeError: Cannot read property 'style' of undefined

In CSS I have defined the opacity as 0.6 and I want to change it to 0.3

Anyone got advise or a clue?

thx, Joost

`.classList.add` does not return an Element - that method returns `undefined` — Jaromanda X, Sep 28 '20 at 09:17
@ATD i guess , he wants to change the value of opacity of tht particular class. not just tht element. — Sandrin Joy, Sep 28 '20 at 09:31
@SandrinJoy Perhaps, but then just create a new class called, say, `info-hotspot-faint` with the same styles except the opacity and just use javascript to change the class for that element — ATD, Sep 28 '20 at 09:34
https://stackoverflow.com/a/5753733/14216003 this might help you. — Sandrin Joy, Sep 28 '20 at 09:34
@ATD no. if we do that , then we have to change the css class of all the existing elements having tht particular clas. — Sandrin Joy, Sep 28 '20 at 09:35
@SandrinJoy no you don't. If you create a new css class, no other element will be using it unless you have explicity said so. As an alternative, you could create a new css class with nothing but `opacity:0.3 !important` and just add that to the new element's classList — ATD, Sep 28 '20 at 09:38
@ATD: Tried that, and that sets the opacity to 0.3. But I want to have a dynamic info-hotspot and want to define the opacity-level. — JoostVanPoppel, Sep 28 '20 at 11:11
When i set the style on WRAPPER, it sets opacity of the whole wrapper to 0.1. I only want to change the 0.6 in the "info-hotspot"; `.info-hotspot { line-height: 1.2em; -webkit-transition: opacity 0.2s 0.2s; transition: opacity 0.2s 0.2s; opacity: 0.6; }` — JoostVanPoppel, Sep 28 '20 at 11:13
Then your definition of "info-hotspot" is getting confused. It sounds like you want to create something else within a div element and apply the styles to that instead of the wrapper itself? But your code is ONLY about a div element. — ATD, Sep 28 '20 at 11:16

score 0 · Answer 1 · answered Sep 28 '20 at 09:18

0

classList is a DOMTokenList, that, as documentation says, has a add method, which returns undefined

You probably want:

wrapper.style.opacity = 0.3;

answered Sep 28 '20 at 09:18

Alberto Sinigaglia

12,097
2
20
48

This makes the WHOLE wrapper have opacity 0.3. I only want to make the "info-hotspot" part-opacity 0.3 – JoostVanPoppel Sep 28 '20 at 11:17

score 0 · Answer 2 · answered Sep 28 '20 at 09:18

0

Use this instead:

wrapper.style.opacity = 0.3;

mytest is undefined because .add method doesn't return anything

answered Sep 28 '20 at 09:18

F.NiX

1,457
3
12
20

score 0 · Answer 3 · answered Sep 28 '20 at 11:16

  function createInfoHotspotElement(hotspot) {

    
    // Create wrapper element to hold icon and tooltip.
    var wrapper = document.createElement('div');
    wrapper.classList.add('hotspot');
    wrapper.classList.add('info-hotspot');
   
    // Create hotspot/tooltip header.
    var header = document.createElement('div');
    header.classList.add('info-hotspot-header');

    // Create image element.
    var iconWrapper = document.createElement('div');
    iconWrapper.classList.add('info-hotspot-icon-wrapper');
    var icon = document.createElement('img');
    icon.src = 'img/info.png';
    icon.classList.add('info-hotspot-icon');
    iconWrapper.appendChild(icon);

    // Create title element.
    var titleWrapper = document.createElement('div');
    titleWrapper.classList.add('info-hotspot-title-wrapper');
    var title = document.createElement('div');
    title.classList.add('info-hotspot-title');
    title.innerHTML = hotspot.title;
    
    titleWrapper.appendChild(title);

    // Create close element.
    var closeWrapper = document.createElement('div');
    closeWrapper.classList.add('info-hotspot-close-wrapper');
    var closeIcon = document.createElement('img');
    closeIcon.src = 'img/close.png';
    closeIcon.classList.add('info-hotspot-close-icon');
    closeWrapper.appendChild(closeIcon);

    // Construct header element.
    header.appendChild(iconWrapper);
    header.appendChild(titleWrapper);
    header.appendChild(closeWrapper);

    // Create text element.
    var text = document.createElement('div');
    text.classList.add('info-hotspot-text');
    text.innerHTML = hotspot.text;

    // Place header and text into wrapper element.
    wrapper.appendChild(header);
    wrapper.appendChild(text);

    // Create a modal for the hotspot content to appear on mobile mode.
    var modal = document.createElement('div');
    modal.innerHTML = wrapper.innerHTML;
    modal.classList.add('info-hotspot-modal');
    document.body.appendChild(modal);
 
    var toggle = function() {
      wrapper.classList.toggle('visible');
      modal.classList.toggle('visible');
    };

    // Show content when hotspot is clicked.
    wrapper.querySelector('.info-hotspot-header').addEventListener('click', toggle);

    // Hide content when close icon is clicked.
    modal.querySelector('.info-hotspot-close-wrapper').addEventListener('click', toggle);

    // Prevent touch and scroll events from reaching the parent element.
    // This prevents the view control logic from interfering with the hotspot.
    stopTouchAndScrollEventPropagation(wrapper);

    return wrapper;
  }

the css;

.info-hotspot {
  line-height: 1.2em;
  -webkit-transition: opacity 0.2s 0.2s;
  transition: opacity 0.2s 0.2s;
  opacity: 0.6;
}

ATD · Answer 4 · 2020-09-28T11:58:36.623

Is this the structure of your hotspot:

<div class="hotspot info-hotspot"> // wrapper variable
  <div class="info-hotspot-header"> // header variable
    <div class="info-hotspot-icon-wrapper"> //iconWrapper variable
      <img src="img/info.png" class="info-hotspot-icon"> // iconWrapper variable
    </div>
    <div class="info-hotspot-title-wrapper"> // titleWrapper variable
      <div class="info-hotspot-title"> // title variable
        (hotspot.title goes here)
      </div>
    </div>
    <div class="info-hotspot-close-wrapper"> // closeWrapper variable
      <img src="img/close.png" class="info-hotspot-close-icon"> // closeIcon variable
    </div>
  </div>
  <div class="info-hotspot-text"> // text variable
    (hotspot.text goes here)
  </div>
</div>


<div class="info-hotspot-modal"> // modal variable
  (contents of wrapper div - BUT ONLY THE CONTENTS)
</div>

At this point, there are two questions:

1 - Your code only inserts the wrapper's innerHTML into the modal DIV - should that be either appendChild() or outerHTML so that you get the entire DIV and its contents?

2 - Which part of this structure actually requires the opacity style?

May I just ask what effect you are trying to achieve. Your css class definition includes a transition which implies that you want to a a new div that fades in. If you go to your profile page and click in the "All Actions" option, and then on one of the links back to a comment on this page, you will see that the comment is displayed in a yellowy div and that fades out to plain white. Apart from fading in instead of out, and the fact that the comment is already there, not a new one, is that what you want to happen? — ATD, Sep 28 '20 at 12:12

score -1 · Answer 5 · edited Sep 28 '20 at 09:28

-1

It's not completely clear to me what you are trying to do here, but this should work:

var wrapper = document.createElement('div');

wrapper.class='hotspot';

wrapper.style.cssText='opacity:0.3;';

document.body.appendChild(wrapper);

edited Sep 28 '20 at 09:28

Ivar

6,138
12
49
61

answered Sep 28 '20 at 09:24

someuser999

1
1

this is to change the style of tht element. He asked to change the property of a particular css class – Sandrin Joy Sep 28 '20 at 09:31
That’s not what I’m seeing… you can’t add/remove classes to an element that hasn’t even been created. – someuser999 Sep 28 '20 at 09:34
@SandrinJoy Where does he says that he wants to redefine the css class itself? If that was the case, then updating the css definition manually would do it - or, use cssRules to update through code (but that's a lot more complicated). The implication of the question is that this particular element has the same class as all of the others BUT with the exception that it needs a different opacity value. – ATD Sep 28 '20 at 09:43
@ATD "In CSS I have defined the opacity as 0.6 and I want to change it to 0.3" This line – Sandrin Joy Sep 28 '20 at 09:46
See error... "Cannot read property 'style' of undefined" ...because the element doesn't exist yet! Only after my script above can he start using Addclass/Removeclass. – someuser999 Sep 28 '20 at 09:47
@someuser999 The element exists as soon as he creates it - the very first line of code. The problem is that his code is trying to set the new styling to the wrong thing - it needs to be on the `wrapper` object (ie, the new DIV) itself. – ATD Sep 28 '20 at 09:51
Unless you appendChild() it doesn't exist. End of story... – someuser999 Sep 28 '20 at 09:52
@someuser999 Then what exactly is the appendChild() appending if not an EXISTING object? – ATD Sep 28 '20 at 09:52
@someuser999 Even in your own code you are updating the cssText on the new DIV object BEFORE the appendChild(). You can't have it both ways! – ATD Sep 28 '20 at 09:54
He doesn't have an appendChild() in his script. – someuser999 Sep 28 '20 at 09:54
@someuser999 Not in the code he has provided, no, but we don't know if he has that later on. All he has shown us is the code **up to the point of failure**. But, whether appendChild() is there or not, the createElement function has created a new object that can be manipulated as he wants - including adding styling. – ATD Sep 28 '20 at 09:56
I can only go by what I see. He tried to operate on an element before an appendChild() and that's not valid and should throw a "undefined". – someuser999 Sep 28 '20 at 09:59
@someuser999 It is valid. Most code works that way when creating a new object. YOUR OWN CODE does that. It has nothing to do with whether or not the new object has been appended to a parent object. The very first line of his code creates the object. The issue, as I and others have said, is that he is trying to apply styling to the wrong thing. – ATD Sep 28 '20 at 10:05
@someuser999 Also note that your code is wrong - it should be `className` not `class` – ATD Sep 28 '20 at 10:07
Incorrect. You can ASSIGN a value before element creation like... e.id="abc"; ...but you cannot OPERATE with changing/removing a class. There's a BIG difference between ASSIGN and OPERATE. – someuser999 Sep 28 '20 at 10:26
@someuser999 What are you on about? `assign` gives the variable `wrapper` a new object. Once that object has been created by the document.createElement() function, it is assigned to the variable. That is how we create new elements. Thereafter, you can do what you want with the object's properties or functions etc. This has NOTHING to do with whether or not you have used appendChild as that just adds the object to a parent. – ATD Sep 28 '20 at 10:42
Prior to element creation, this is valid... e.id='abc'; ... but this is not... e.id='abc'.trim(); because we are calling a function (OPERATING) on a non existant element. – someuser999 Sep 28 '20 at 11:19
Seriously? So, now you are now saying that we can't even use string functions? If e has been assigned to a newly created element, then e.id exists, and we can use whatever method we want to assign a value to it. We could even do: e.id = getAValue(); if we wanted to. The createElement() function call creates the object. Thereafter it is an object. – ATD Sep 28 '20 at 11:38

Javascript: can not set property style Opacity, TypeError: Cannot read property 'style' of undefined

5 Answers5