Unable to style dynamically created element

Unable to style dynamically created element
0

#1

could anyone help me out here.
I am trying to style an element created using javascript
I am trying to style it using css.
Here’s the javascript where I dynamically create the element

 tweetz=tweetz+ "<p>"+ "<span class='twitlabel'>"+ "TWEET "+t+" :"+"</span>"+ newTweets[i] + "</p>"+ "<hr>";

and here’s how I am trying to style it using css

.twitlabel{
  color:blue;
}

but the style is not applying to the element.
so what am I doing wrong??


#2

Can you post a link to your codepen?


#3

I am not doing it on codepen.
I am doing it in localhost, as this is node js
but I have uploaded my code on github too.
here’s the github link - https://github.com/silentarrowz/imad-2016-app


#4

Sorry, I can’t seem to find the code in question. Can you paste your code instead?


#5

I pasted the code in my original post


#6

I meant the entire code. There could be something else that’s causing the problem.


#7

ok, here’s the main.js code

window.onload = function(){
    var twitterButton = document.getElementById('tweetButton');
    twitterButton.onclick = function(){
        var searchFor =document.getElementById('tweetSearch');
        var searchForTerm = searchFor.value;
        console.log('search for keyword : ', searchForTerm);
    var twitterxr = new XMLHttpRequest();
    twitterxr.onreadystatechange = function(){
    if(twitterxr.readyState ===XMLHttpRequest.DONE && twitterxr.status ===200){
        var newTweets = JSON.parse(twitterxr.responseText);
        console.log("newTweets is : ",newTweets);
        var tweetz='';
        var t;
        for(var i=0;i<newTweets.length;i++){
                t=i+1;
             tweetz=tweetz+ "<p>"+ "<span class='twitlabel'>"+ "TWEET "+t+" :"+"</span>"+ newTweets[i] + "</p>"+ "<hr>";
        }
        console.log('tweetz is : ',tweetz);
        var tweetHere = document.getElementById('tweetz');
        tweetHere.innerHTML = tweetz;
    }


    };//twitterxr onreadystatechange function ends

     //Make the request
             twitterxr.open('GET','http://localhost:8080/t/'+searchForTerm,true);
             twitterxr.send(null);
    };//twitterbutton onclick function ends


    var submitButton = document.getElementById('submit_btn');
    submitButton.onclick = function(){
        var request = new XMLHttpRequest();

        request.onreadystatechange=function(){
            if(request.readyState===XMLHttpRequest.DONE && request.status === 200){
                var data = request.responseText;
                console.log(data);
            }
        };


        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        request.open('POST','http://localhost:8080/create-user',true);
        request.setRequestHeader('Content-Type','application/json');
        request.send(JSON.stringify({username:username,password:password}));
    };



    };//window onload function ends

and here’s the css

    body{
      background-color: #e9ebee;
      font-family: Helvetica, Arial, sans-serif;
    }
    .navbar-default .navbar-brand{
      color:white;
    }
    .navbar-default{
      background-color: #3b5998;

    }
    .navbar-default .navbar-nav>li>a{
      color:white;
    }
    .navbar-default .navbar-nav>.active>a{
      background-color: #337ab7;
      color:white;
    }

    .navbar-default .navbar-brand:hover,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>li>a:hover{
      background-color: #337ab7;
      color:white;

    }

    img{
      border:2px solid rgba(202, 199, 199, 0.7);;
      width:85%;
    }

    #mainbody{
      padding-top: 5px;
      margin-top: 51px;
      padding-left:15px;
      
    }

    #aboutme,#twitterdiv{
      background-color: white;
      border:1px solid rgba(202, 199, 199, 0.7);
      
      padding:5px 5px 5px 5px;
      }

    #twitterdiv{
      margin-top: 5px;
    } 

    #aboutme h1{
      text-align: center;
    }


    #rightcol{
      background-color: white;
      border:1px solid rgba(202, 199, 199, 0.7);
      margin-left:31px;


    span.twitlabel{
      color:blue;
    }

#8

Can I see the HTML code as well?


#9

here’s the link to the profile.html file on github


#10

In your html you link to ui/style.css, but the styling is in ui/profile.css


#11

oh, sorry I was working in local host and didnt change the full profile.html yet.

let me just paste the local code

<!doctype html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">  

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Fontawesome library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">



<link rel="stylesheet" type="text/css" href="/ui/profile.css">
<script type="text/javascript" src="/ui/main.js" ></script>
</head>

<body>
 <!--Navbar Begins    -->
  <nav class="navbar navbar-default navbar-fixed-top scrolltop">
    <div class="container">
      <!-- navbar header begins   -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
 <span class="sr-only">Toggle Navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
  </button>
        <a class="navbar-brand" href="#">Faraz Ahmed</a>

      </div>
      <!-- navbar header ends -->

      <!-- div collapse begins -->
      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#aboutme">About</a></li>
          <li><a href="/news">News</a></li>
          <li><a href="/weather">Weather</a></li>
        </ul>
      </div>
      <!-- div collapse ends -->
    </div>
    <!-- container ends -->
  </nav>
  <!--Navbar ends    -->
  <div class="container-flud">
<div class="row" id="mainbody">
<div class="col-md-3 col-sm-3">
<img class="img-responsive"  src="http://res.cloudinary.com/whizzy/image/upload/v1454699647/faraz_qwdqrx.jpg" alt="">
</div>
<div class="col-md-6 col-sm-6" id="maincontent">
  <div id="aboutme">  <h1>My Portfolio</h1>
 <p class="about">I am a self taught web developer who has learnt html,css, Javascript,Jquery, Ajax and bootstrap too. I keep building websites and other apps to practice what I have learnt. This site is responsive. Go ahead and take a look at it in your mobile and see how the different elements adjust to your screen size.<br>
  And that's not all. <br>
  I have recently learnt the usage and integration of api's and you can see it in action in my twitter and news app link to on this page.


 </p>

</div><!--aboutme div ends -->


  <div id="twitterdiv">
  <h3>Tweets Here</h3>
  <input type="text" id="tweetSearch" placeholder="enter keyword to search for"></input>
  <button id="tweetButton" type="submit">Submit</button>
<p id="tweetz">tweets appear here</p>


</div><!--twitterdiv ends -->


  </div><!-- main content div ends -->
<div class="col-md-2 col-sm-2" id="rightcol">
 <h3>Skills Learnt</h3>
 <ul>
<li>Html</li>
<li>Css</li>
<li>Javascript</li>
<li>Jquery</li>
<li>Bootstrap</li>
<li>Ajax</li>
<li>Node</li>
<li>Express js</li>

 </ul>
</div>  

</div><!--row ends -->
</div><!--container fluid ends -->
</body>

</html>

#12

Shouldn’t the <link> point at profile.css, not /ui/profile.css?


#13

no, because the file is in the ui folder.
all the other styles are working ok, so that’s the correct pointing.


#14

The profile.html file is in the same directory as profile.css in the GitHub repo. Did you move your files around?


#15

no, I didnt move the files around. it’s in same folder alright


#16

Ok, I think I got it. The #rightcol rule in your CSS has no closing brace.


#17

haha. wow! yes. You are so right.
i fixed this and it’s working now.
Thank you so much.


#18

To think that a missing closing brace caused us an hour of trouble :smiley:


#19

not an hour.
it was a few hours for me.
i spent a few hours yesterday and then a few hours today
and yet couldnt find the missing } until you pointed it out.


#20

I would recommend getting an editor, such as Atom, and downloading an validator that validates your codes when you save it (meaning it’d alert you that you forgot to write that pesky closing bracket!).

Just a tip for the future :slight_smile: