我的目标是将数组中的链接呈现为可点击的链接，但是按钮下面没有呈现任何内容。只有项目符号被呈现。你能帮我看看发生了什么吗？
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>
2条答案
按热度按时间8wtpewkr1#
您需要向
a链接添加一些内容，否则它们将为空。尝试类似
anchorEl.textContent = 'this is a link';的内容qyswt5oh2#
1.您试图将整个数组应用为属性的值，而实际上它应该只是输入的值。
1.您没有设置锚的text content，这就是输入文本不显示的原因。
注意：我已经删除了对数组的引用，因为您似乎没有对它执行任何操作。