How to render list items which are clickable links inside unordered list

Question

My goal is to render the links in the array as clickable links, but it's not rendering anything below the button. Only the bullet is getting rendered. Could you please help me find what is happening?

let myLeads = [];
const inputEl = document.getElementById("input-el");
const inputBtn = document.getElementById("input-btn");
const ulEl = document.getElementById("ul-el");

inputBtn.addEventListener("click", () => {
  myLeads.push(inputEl.value);
  //create new li element
  let anchorEl = document.createElement("a");
  let ulEl = document.getElementById("ul-el");
  let liEl = document.createElement("li");

  // Clear Input
  inputEl.value = "";

  // Set the href attribute 
  anchorEl.setAttribute('href', myLeads);
  liEl.appendChild(anchorEl);
  ulEl.appendChild(liEl);
});

:root {
  --color-primary: #ab79d6;
  --color-on-primary: #351d4a;
  --color-secondary: #d367c1;
  --color-background: #27272c;
  --color-on-background: #c5c5ce;
  --color-background-alt: #1e1c22;
  --color-background-alt-alpha: rgba(30, 28, 34, .75);
  --color-inverse: #fff;
  --color-gray: #8e8e8e;
  --color-yellow: #dedf40;
  --color-green: #62cb5c;
  --color-blue: #00bbcb;
  --color-on-blue: #004a09;
  --gradient: var(--color-secondary) 10%, var(--color-yellow) 25%, var(--color-green) 50%, var(--color-blue) 75%, var(--color-primary) 90%;
  --brand-font: "Kanit", serif;
  --brand-font-weight: 800;
  --brand-font-alt: "Baloo 2", system-ui, sans-serif;
  --brand-font-alt-weight: normal;
  --brand-font-alt-weight-bold: 500;
  /* Input */
  --input-border: #8b8a8b;
  --input-focus-h: 245;
  --input-focus-s: 100%;
  --input-focus-l: 42%;
  /* Button */
  --btnColor: #ab79d6;
}

*,
::after,
::before {
  box-sizing: border-box;
}

body {
  margin: 0;
}

body {
  background-color: var(--color-background);
  -o-border-image: linear-gradient(to right, var(--gradient)) 1;
  border-image: linear-gradient(to right, var(--gradient)) 1;
  border-style: solid;
  border-width: .5rem 0 0;
  color: var(--color-on-background);
  display: block;
}

.input {
  font-size: 16px;
  font-size: max(16px, 1em);
  font-family: inherit;
  padding: 0.25em 0.5em;
  background-color: #fff;
  border: 2px solid var(--input-border);
  border-radius: 4px;
  transition: 180ms box-shadow ease-in-out;
  margin-top: 1rem;
  width: 25vw;
}


/* Media Query for Mobile Devices */

@media (max-width: 480px) {
  .input {
    width: 50vw;
  }
}


/* Media Query for low resolution  Tablets, Ipads */

@media (min-width: 481px) and (max-width: 767px) {
  .input {
    width: 50vw;
  }
}

input[type="file"] {
  font-size: 0.9em;
  padding-top: 0.35rem;
}

.input:focus {
  border-color: hsl(var(--input-focus-h), var(--input-focus-s), var(--input-focus-l));
  box-shadow: 0 0 0 3px hsla(var(--input-focus-h), var(--input-focus-s), calc(var(--input-focus-l) + 40%), 0.8);
  outline: 3px solid transparent;
}

label {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
  display: block;
  margin-top: 1rem;
}


/* Button */

button.button {
  --button-background: var(--color-primary);
  --button-color: var(--color-on-primary);
  --outline-color: transparent;
  background-color: var(--button-background);
  border: 2px solid transparent;
  border-radius: .5em;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--brand-font-alt);
  font-weight: var(--brand-font-alt-weight-bold);
  gap: .5em;
  justify-content: center;
  line-height: calc(4px + 2ex);
  padding: .55em .75em .5em;
  text-align: center;
  text-decoration: none;
  transition: none .18s ease-in-out;
  transition-property: none;
  transition-property: background-color, color, border-color;
  display: block;
  margin-top: 1rem;
}

button.button:focus {
  box-shadow: 0 0 0 max(.15em, 2px) var(--button-focus-inner, var(--button-color)), 0 0 0 max(.3em, 2px) var(--button-focus-outer, var(--button-background))
}

button.button:active,
button.button:hover {
  background-color: var(--button-hover-background-color, var(--button-color));
  color: var(--color-inverse, var(--button-background))
}

button.button:active:not(.button-outlined),
button.button:hover:not(.button-outlined) {
  border-color: var(--button-hover-border-color, currentColor)
}


/* container */

.container {
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

<div class="container">
  <label for="text-input">Text Input</label>
  <input class="input" id="input-el" type="text" />
  <button id="input-btn" class="button" type="button">SAVE INPUT</button>
  <ul id="ul-el"></ul>
  <script src="index.js"></script>
</div>

Answer 1

You need to add some content to the a links, otherwise they are empty.

Try something like anchorEl.textContent = 'this is a link';

let myLeads = [];
const inputEl = document.getElementById("input-el");
const inputBtn = document.getElementById("input-btn");
const ulEl = document.getElementById("ul-el");

inputBtn.addEventListener("click", () => {
  myLeads.push(inputEl.value);
  //create new li element
  let anchorEl = document.createElement("a");
  anchorEl.textContent = 'some link';
  let liEl = document.createElement("li");

  // Clear Input
  inputEl.value = "";

  // Set the href attribute 
  anchorEl.setAttribute('href', myLeads);
  liEl.appendChild(anchorEl);
  ulEl.appendChild(liEl);
});

:root {
  --color-primary: #ab79d6;
  --color-on-primary: #351d4a;
  --color-secondary: #d367c1;
  --color-background: #27272c;
  --color-on-background: #c5c5ce;
  --color-background-alt: #1e1c22;
  --color-background-alt-alpha: rgba(30, 28, 34, .75);
  --color-inverse: #fff;
  --color-gray: #8e8e8e;
  --color-yellow: #dedf40;
  --color-green: #62cb5c;
  --color-blue: #00bbcb;
  --color-on-blue: #004a09;
  --gradient: var(--color-secondary) 10%, var(--color-yellow) 25%, var(--color-green) 50%, var(--color-blue) 75%, var(--color-primary) 90%;
  --brand-font: "Kanit", serif;
  --brand-font-weight: 800;
  --brand-font-alt: "Baloo 2", system-ui, sans-serif;
  --brand-font-alt-weight: normal;
  --brand-font-alt-weight-bold: 500;
  /* Input */
  --input-border: #8b8a8b;
  --input-focus-h: 245;
  --input-focus-s: 100%;
  --input-focus-l: 42%;
  /* Button */
  --btnColor: #ab79d6;
}

*,
::after,
::before {
  box-sizing: border-box;
}

body {
  margin: 0;
}

body {
  background-color: var(--color-background);
  -o-border-image: linear-gradient(to right, var(--gradient)) 1;
  border-image: linear-gradient(to right, var(--gradient)) 1;
  border-style: solid;
  border-width: .5rem 0 0;
  color: var(--color-on-background);
  display: block;
}

.input {
  font-size: 16px;
  font-size: max(16px, 1em);
  font-family: inherit;
  padding: 0.25em 0.5em;
  background-color: #fff;
  border: 2px solid var(--input-border);
  border-radius: 4px;
  transition: 180ms box-shadow ease-in-out;
  margin-top: 1rem;
  width: 25vw;
}


/* Media Query for Mobile Devices */

@media (max-width: 480px) {
  .input {
    width: 50vw;
  }
}


/* Media Query for low resolution  Tablets, Ipads */

@media (min-width: 481px) and (max-width: 767px) {
  .input {
    width: 50vw;
  }
}

input[type="file"] {
  font-size: 0.9em;
  padding-top: 0.35rem;
}

.input:focus {
  border-color: hsl(var(--input-focus-h), var(--input-focus-s), var(--input-focus-l));
  box-shadow: 0 0 0 3px hsla(var(--input-focus-h), var(--input-focus-s), calc(var(--input-focus-l) + 40%), 0.8);
  outline: 3px solid transparent;
}

label {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
  display: block;
  margin-top: 1rem;
}


/* Button */

button.button {
  --button-background: var(--color-primary);
  --button-color: var(--color-on-primary);
  --outline-color: transparent;
  background-color: var(--button-background);
  border: 2px solid transparent;
  border-radius: .5em;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--brand-font-alt);
  font-weight: var(--brand-font-alt-weight-bold);
  gap: .5em;
  justify-content: center;
  line-height: calc(4px + 2ex);
  padding: .55em .75em .5em;
  text-align: center;
  text-decoration: none;
  transition: none .18s ease-in-out;
  transition-property: none;
  transition-property: background-color, color, border-color;
  display: block;
  margin-top: 1rem;
}

button.button:focus {
  box-shadow: 0 0 0 max(.15em, 2px) var(--button-focus-inner, var(--button-color)), 0 0 0 max(.3em, 2px) var(--button-focus-outer, var(--button-background))
}

button.button:active,
button.button:hover {
  background-color: var(--button-hover-background-color, var(--button-color));
  color: var(--color-inverse, var(--button-background))
}

button.button:active:not(.button-outlined),
button.button:hover:not(.button-outlined) {
  border-color: var(--button-hover-border-color, currentColor)
}


/* container */

.container {
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

<div class="container">
  <label for="text-input">Text Input</label>
  <input class="input" id="input-el" type="text" />
  <button id="input-btn" class="button" type="button">SAVE INPUT</button>
  <ul id="ul-el"></ul>
  <script src="index.js"></script>
</div>