I have been working on a code to create custom links based on user input, and have faced some challenges along the way.
Despite using snippets from various online sources, everything seems to be functioning correctly except for two issues:
- The generated links are not adhering to the CSS rules
- I am struggling to find a way to separate each link
I feel a bit stuck in my coding journey at this point. PS: If necessary, you can access the Fiddle https://jsfiddle.net/Adrienmlt/uspjLceg/4/
//SEARCH BOX INPUT
$('#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>
<!--Checkboxes-->
<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>