#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2016
    Posts
    109
    Rep Power
    3

    Template literals in js style


    Dear all,

    I am trying to get this to work, But I am not sure if I am doing this right.

    Code:
    static error_msg(description, msg_id, msg){
    
            document.querySelector(`${msg_id}`).innerHTML = `${msg}`;
           
         
        }
    But I get this error:

    TypeError: (intermediate value).style is undefined

    The error is coming from this line:

    Code:
     `${description}`.style.borderColor = 'red';
    Any reason why? The above lines works fine but as soon as I add this line I get type error?
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2011
    Posts
    24
    Rep Power
    0
    What value are you passing as description argument?

    Code:
    document.querySelector(`${msg_id}`).innerHTML = `${msg}`;
    Why are you using template literals inside a empty string here? It's like doing:
    Code:
    document.querySelector("" + msg_id + "").innerHTML = "" + msg + "";
    When you could just do:
    Code:
    document.querySelector(msg_id).innerHTML = msg;
    The line giving a error makes even less sense. You can't do "document.getElementById('desc-id')".style..., the first part of the statement can't be a string. You have to either pass an element or a selector as description argument.
    Code:
    element.style.borderColor = 'red';
    document.querySelector(selector).style.borderColor = 'red';
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2016
    Posts
    109
    Rep Power
    3
    Originally Posted by Beuge
    What value are you passing as description argument?

    Code:
    document.querySelector(`${msg_id}`).innerHTML = `${msg}`;
    Why are you using template literals inside a empty string here? It's like doing:
    Code:
    document.querySelector("" + msg_id + "").innerHTML = "" + msg + "";
    When you could just do:
    Code:
    document.querySelector(msg_id).innerHTML = msg;
    The line giving a error makes even less sense. You can't do "document.getElementById('desc-id')".style..., the first part of the statement can't be a string. You have to either pass an element or a selector as description argument.
    Code:
    element.style.borderColor = 'red';
    document.querySelector(selector).style.borderColor = 'red';
    Hi. Thank you for your reply.

    I can see what I am doing wrong here, I can see from your explanation that I am trying to assign query selector re-assigned to a string.
    and that wont work. But instead this is what I've done.

    Code:
     static error_msg(element, msg_id, msg){
    
            document.querySelector(`${msg_id}`).innerHTML = `${msg}`;
            document.querySelector(`${element}`).style.borderColor = 'red';
         
        }
    and its working now. Thanks bunch!
    Last edited by Brume007; February 26th, 2018 at 12:33 PM.

IMN logo majestic logo threadwatch logo seochat tools logo