Why does my array's result doesn't follow my CSS rules?

Question

I am using the following code to generate custom links when the user types a word.

The project is written with chunks of code I find online. Everything surprisingly "works" except 2 things :

the generated links don't follow the CSS rules
I can't find any way of separating each link

I'm kind of stuck here in my journey trough coding. PS: If needed here's the Fiddle https://jsfiddle.net/Adrienmlt/uspjLceg/4/

//SEARCH BOX INSPUT
$('#go').one('click', function(){
var id=$('#id').val();

//ARRAY LIST 1
  var linkList = {
        "http://google.com/": "Test1",
        "http://google.org/": "Test2",
        "http://google.net/": "Test3",
    };
    
//LINK GENERATION FROM ARRAY
      for (var link in linkList) {
        if (linkList.hasOwnProperty(link)) {
          var a = document.createElement('a');
              linkText = document.createTextNode(linkList[link]);
								a.href = link+id;
         					 a.appendChild(linkText) ;
        }
        
//CHECK BOX INPUT
if( $('input[name=Label2]').is(':checked') ){
				window.open(document.body.appendChild(a))
				} else {
				document.body.appendChild(a);
				}
      }

   //EVERY LINK OPENS IN A NEW WINDOW
   var links = document.links;
for (var i = 0; i < links.length; i++) {
     links[i].target = "_blank";
}
});

body {
	padding-left: 20px;
}
h1{
	font-size: 10px;
	font-family: "roboto";
	font-weight: 200;
}
h2{
	font-size: 20px;
	font-family: "roboto";
	font-weight: 200;
}
div {
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 5px;
  padding-left: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
  <head>
    <meta charset="utf-8">
    <title>Project 1</title>
    <script src="js/main.js"></script>
    <link type="text/css" rel="stylesheet" href="css/style.css">
  </head>
<body> 
<center> 

  <h1> 
   <div>
    <!--Chekboxes-->
                <input type="checkbox" id="Label2" name="Label2">
                <label for="Label2">Open every result in a new tab </label>
</div>
 <div>
<input type="text" value="" id="id"/>
<button type="button" id="go">GO</button> </div>
<div id="output"></div>
<div id="linkText"></div>
</h1>
</center>
  </body>
</html>

Your code should be posted here. Stack Overflow has facilities very similar to what jsfiddle provides. You didn't post the CSS here, so it's hard to say what the problem is. — Pointy
– Pointy, Commented Mar 27, 2020 at 16:38
Side Note; if (linkList.hasOwnProperty(link)) { <= your grabbing the link off of the linkList. How would it not be a property? — Taplar
– Taplar, Commented Mar 27, 2020 at 16:50

i.rijad · Accepted Answer · 2020-03-27 16:50:12Z

I think you CSS is following rules.. add following code to your css

//SEARCH BOX INSPUT
$('#go').one('click', function(){
var id=$('#id').val();

//ARRAY LIST 1
  var linkList = {
        "http://google.com/": "Test1",
        "http://google.org/": "Test2",
        "http://google.net/": "Test3",
    };
    
//LINK GENERATION FROM ARRAY
      for (var link in linkList) {
        if (linkList.hasOwnProperty(link)) {
          var a = document.createElement('a');
              linkText = document.createTextNode(linkList[link]);
								a.href = link+id;
         					 a.appendChild(linkText) ;
        }
        
//CHECK BOX INPUT
if( $('input[name=Label2]').is(':checked') ){
				window.open(document.body.appendChild(a))
				} else {
				document.body.appendChild(a);
				}
      }

   //EVERY LINK OPENS IN A NEW WINDOW
   var links = document.links;
for (var i = 0; i < links.length; i++) {
     links[i].target = "_blank";
}
});

body {
	padding-left: 20px;
}
h1{
	font-size: 10px;
	font-family: "roboto";
	font-weight: 200;
}
h2{
	font-size: 20px;
	font-family: "roboto";
	font-weight: 200;
}
div {
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 5px;
  padding-left: 8px;
}
a{
  display:block;
  color:red;
  text-decoration:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <meta charset="utf-8">
    <title>Project 1</title>
    <script src="js/main.js"></script>
    <link type="text/css" rel="stylesheet" href="css/style.css">
  </head>
<body> 
<center> 

  <h1> 
   <div>
    <!--Chekboxes-->
                <input type="checkbox" id="Label2" name="Label2">
                <label for="Label2">Open every result in a new tab </label>
</div>
 <div>
<input type="text" value="" id="id"/>
<button type="button" id="go">GO</button> </div>
<div id="output"></div>
<div id="linkText"></div>
</h1>
</center>
  </body>
</html>

Collectives™ on Stack Overflow

Why does my array's result doesn't follow my CSS rules?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related