- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试构建一个简单的待办事项应用程序,但遇到了错误。
我收到了一个输入到输入中的文本,将其分配给带有 insideText 的项目,并在单击按钮时将该项目添加到我的列表中。
但是当我单击按钮时,我得到文本未定义
我是 javascript 新手,不知道为什么会发生这种情况以及如何修复它,因此我们将不胜感激。
This is the link to codepen with my code
document.getElementById('todo').addEventListener('click', function(e) {
e.preventDefault();
var value = document.getElementById('input-field').value;
if (value) {
//console.log(value)
addItem(text)
}
});
function addItem(text) {
// reveal an input field
var action = 1;
if (action) {
var input = document.getElementById('input-field');
input.style.width = '0' ? '85%' : '0';
action = 0;
} else if (!action) {
//create element and add it to the DOM
var list = document.getElementById('list');
var item = document.createElement('li');
item.innerText = text;
var btn = document.createElement('button');
btn.classList.add('todo__btn');
item.appendChild(btn);
list.appendChild(item);
action = 1;
}
}
document.getElementById('add-item').addEventListener('click', addItem);
最佳答案
action
的作用域位于函数内部,因此它始终为 1
addEventListener
调用 function(event)
,因此 text
将是点击事件参数,而不是文本。input.style.width = '0' 中? '85%' : '0'
条件参数为 '0'
document.getElementById('todo').addEventListener('click'...
中的
addItem(text)
正在调用 undefined variable text
,尝试addItem(value)
;已修复:
document.getElementById('todo').addEventListener('click', function(e) {
e.preventDefault();
var value = document.getElementById('input-field').value;
if (value) {
//console.log(value)
addItem(value);
}
});
var action = true;
function addItem(e) {
var input = document.getElementById('input-field');
// reveal an input field
if (action) {
input.style.width = '85%';
action = false;
} else if (!action) {
//create element and add it to the DOM
var item = document.createElement('li');
item.classList.add('todo__btn');
item.innerText = input.value;
var btn = document.createElement('button');
btn.classList.add('todo__list-item');
item.appendChild(btn);
var list = document.getElementById('list');
list.appendChild(item);
action = true;
}
}
document.getElementById('add-item').addEventListener('click', addItem);
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
font-size: 14px;
background: #8e9eab;
background: -webkit-linear-gradient(to right, #eef2f3, #8e9eab);
background: linear-gradient(to right, #eef2f3, #8e9eab);
}
.container {
width: 90%;
margin: 0 auto;
}
.app {
position: relative;
background: white;
width: 50%;
height: 500px;
margin: 15px auto;
border-radius: 10px;
}
.header {
padding: 5px 10px;
border-radius: 10px;
background: MediumSlateBlue;
color: white;
font-size: 1.2em;
font-weight: 700;
text-align: center;
}
.todo {
color: black;
}
.todo__list {
margin: 10px 0 0 0;
padding: 0;
}
.todo__list-item {
display: flex;
justify-content: space-between;
padding: 10px 0;
line-height: 2;
cursor: pointer;
border-bottom: 1px solid #ebebeb;
}
.todo__list-item:last-of-type {
margin-bottom: 0;
}
.todo__btn {
position: relative;
appearance: none;
outline: none;
border: none;
cursor: pointer;
box-shadow: none;
background: none;
width: 30px;
height: 30px;
}
.unchecked {
width: 32px;
height: 32px;
background-color: MediumSlateBlue;
mask-image: url(/img/circle.svg);
background-size: 100% 100%;
}
.checked {
width: 32px;
height: 32px;
background-color: MediumSlateBlue;
mask-image: url(/img/check.svg);
}
.form {
width: 100%;
height: 50px;
display: flex;
position: absolute;
bottom: 0;
}
.form__btn {
width: 50px;
height: 50px;
position: relative;
margin: 0 auto;
outline: none;
border: none;
box-shadow: none;
appearance: none;
border-radius: 50%;
background: MediumSlateBlue;
cursor: pointer;
}
.form__btn svg {
width: 16px;
height: 16px;
position: absolute;
left: 50%;
top: 50%;
margin: -8px;
}
.form__reveal {
width: 0;
text-indent: 10px;
transition: width 0.3s ease-in-out;
outline: none;
border: none;
appearance: none;
box-shadow: 0 1px 2px rgba(44, 62, 80, 0.1);
background: MediumSlateBlue;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
color: white;
font-size: 1.1em;
}
.form__reveal::-webkit-input-placeholder {
color: white;
}
.complete {
color: #9e9ea0;
text-decoration: line-through;
}
.fill {
fill: white;
}
<section class="app">
<header class="header">
<h1 class="header__head">Today</h1>
</header>
<section class="todo" id="todo">
<div class="container">
<ul class="todo__list" id="list">
<li class="todo__list-item">Reading Bukowski
<button class="todo__btn unchecked"></button>
</li>
<li class="todo__list-item complete">Nor rrr
<button class="todo__btn checked"></button>
</li>
</ul>
</div>
<form class="form">
<input class="form__reveal" id="input-field" placeholder="Enter a task">
<button class="form__btn" id="add-item">
+
</button>
</form>
</section>
</section>
关于javascript - 传递给函数的值未定义?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43467643/
注意:根据 ECMAScript5.1, section 15.1.1.3 , window.undefined 是只读的。 现代浏览器正确地实现了这一点。例如:Safari 5.1、Firefox
我用谷歌搜索,检查了所有常见的响应。这些脚本似乎顺序正确(它们在 the demo 中以相同的顺序工作)但由于某种原因,当我尝试实现它时,我得到了错误。 我有一个 paste bin用我完整的页面代码
我有以下代码: simpleExample.html: Simple example Open the Console. js/simpleExampleJS.
所以我对 typescript 很陌生。 这是我的 tsconfig.json 文件的样子, 我什至不知道那些“例子”是从哪里来的 这是我在浏览器中遇到的错误 这是我的 package.json 最佳
我被 TypeScript 错误困住了: Failed to compile. undefined TypeScript error in undefined(undefined,undefined)
我已将 onlcick 事件附加到表单的提交按钮以覆盖默认的 POST 请求,但在使其正常工作时遇到了一些问题。 我想要的是点击添加到购物车的商品,但只显示模式确认而不刷新页面。 这段代码在我的静态示
我已经完成了这个link .但是给定的解决方案并没有解决我的问题。所有经验丰富的人都建议使用 getActivty().getApplicationContext()。但我使用的是普通类(class)
我有一个应用程序,其中 webpack 配置为模块 bundler ,babel 作为我的 js 编译器。全部都在 Node 引擎上。我设置当我运行 npm run dev 时,将会发生以下流程: w
我正在尝试在浏览器中呈现网址的 JSON 数据,但它在 div 中显示为 undefined, undefined .当我将其响应放入console.log时对象及其数据出现,因此它出现在控制台和浏览
为什么我会收到 Cannot invoke an object which is possibly 'undefined'即使在我检查了 func 之后,Typescript 也会出错引用不是未定义的
我想使用airbnb的eslint修改我的代码结构。我已遵循 eslint-config-airbnb 中给出的说明。启动命令后npm run lint,结果由 'fetch' is not Defi
这个问题在这里已经有了答案: What is the consequence of this bit of javascript? (4 个答案) 关闭 9 年前。 我看到一些 jQuery 脚本嵌
我一直收到这个 pouchDB 错误,我不知道这是怎么回事。 Error: connect ENFILE 127.0.0.1:5984 - Local (undefined:undefined)
import os from os.path import abspath, dirname import sys # Set up django project_dir = abspath(dirn
在 javascript 中,要检查变量是否从未创建过,我们只需执行 if (typeof MyVariable !== "undefined"){ ... } 我想知道如何在 CoffeeScrip
我正在尝试编译 FreeLing,它使用 CMake 来检测 Boost。这是负责它的代码: find_package(Boost COMPONENTS regex filesystem thre
我收到“JQUERY 未定义”错误。你有什么想法吗(代码如下)。 $(document).ready(function() { window.print();
无论我是否将 jQuery $.ajax 调用放入 $(document).ready(function() { 中,我都会收到此错误。这是在 ASP.NET MVC .cshtml 文件上.
我正在构建的网站上遇到问题,但数据表不存在加载(在服务器上)但在本地主机(xamp)上工作正常。 Firefox 会抛出错误“$ 未定义”。 我用谷歌搜索了这些错误,我发现一个 friend 的解决方
当我在 $(document).ready 之前明确包含 jQuery 库时,我无法弄清楚为什么它仍然无法识别 jQuery 语法
我是一名优秀的程序员,十分优秀!