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

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 >
  <label for="text-input">Text Input</label>
  <input  id="input-el" type="text" />
  <button id="input-btn"  type="button">SAVE INPUT</button>
  <ul id="ul-el"></ul>
  <script src="index.js"></script>
</div>

CodePudding user response：

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 >
  <label for="text-input">Text Input</label>
  <input  id="input-el" type="text" />
  <button id="input-btn"  type="button">SAVE INPUT</button>
  <ul id="ul-el"></ul>
  <script src="index.js"></script>
</div>

CodePudding user response：

You're trying to apply a whole array as the value of an attribute when it should just be the value of the input.
You're not setting the text content of the anchor which is why the input text isn't appearing.

Note: I've removed the reference to the array because you don't appear to be doing anything with it.

const inputEl = document.getElementById('input-el');
const inputBtn = document.getElementById('input-btn');
const ulEl = document.getElementById('ul-el');

inputBtn.addEventListener('click', () => {

  // Create the list item and anchor elements
  const liEl = document.createElement('li');
  const anchorEl = document.createElement('a');

  // Set the anchor href and text content
  anchorEl.href = inputEl.value;
  anchorEl.textContent = inputEl.value;

  // Append all the things
  liEl.appendChild(anchorEl);
  ulEl.appendChild(liEl);

  // Reset the value
  inputEl.value = '';

});

body,button.button,label{display:block}: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-border:#8b8a8b;--input-focus-h:245;--input-focus-s:100%;--input-focus-l:42%;--btnColor:#ab79d6}*,::after,::before{box-sizing:border-box}body{margin:0;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)}.input,button.button,label{margin-top:1rem}.input{font-size:16px;font-size:max(16px, 1em);font-family:inherit;padding:.25em .5em;background-color:#fff;border:2px solid var(--input-border);border-radius:4px;transition:box-shadow 180ms ease-in-out;width:25vw}@media (max-width:480px){.input{width:50vw}}@media (min-width:481px) and (max-width:767px){.input{width:50vw}}input[type=file]{font-size:.9em;padding-top:.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%),.8);outline:transparent solid 3px}label{font-size:1.125rem;font-weight:500;line-height:1}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;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:background-color,color,border-color}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{top:50%;left:50%;position:absolute;transform:translate(-50%,-50%)}

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