- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以基本上我无法弄清楚为什么在调用 add() 函数时(当您单击添加按钮时)给我以下错误...
它说:status.style 未定义status是一个html dom,一个html标签
我认为错误几乎位于工作表的末尾
var myArray = []; // * used to store all the data
myArray[0] = ['John', 'Doe', '1980'];
myArray[1] = ['Jane','Malloy','1982'];
myArray[2] = ['Vincent','Malloy','1988'];
var firstName = document.getElementById('firstName');
var secondName = document.getElementById('secondName');
var bornYear = document.getElementById('bornYear');
var output = document.getElementById('output');
var form1 = document.getElementById('form1');
var status = document.getElementById('status');
var add = function() { //calls statusMessagge()
// check if input[] its not empty...
if ( firstName.value.length>0 && secondName.value.length>0 && bornYear.value.length>0 ) {
// * adding inputs to myArray
myArray[myArray.length] = [firstName.value ,secondName.value ,bornYear.value ];
//clearBoxes();
// * status messagge
statusMessagge('good');
alert('is good');
}
else {
statusMessagge('bad');
alert('is bad');
}
};
var statusMessagge = function(arg) { // * it is been called by: add(), show()
// * selecting the messagge to appear
switch (arg) {
case 'good':
status.innerHTML = 'Person added successfully.';
break;
case 'bad':
status.innerHTML = 'Please fill all the fields.';
break;
case 'loading':
status.innerHTML = 'Loading...';
break;
case 'loaded':
status.innerHTML = 'Finish.';
break;
}
// * do opacity effect slow: show|hide
status.style.opacity = 1; // this is the part that I get the error.
setTimeout (function() {
status.removeAttribute('style');
}, 1000);
};
body {
background: lightgray;
font-family: consolas;
font-size: 13px;
padding: 0;
margin: 0;
}
main {
background: #dbcdcd;
margin: 0 auto;
}
form:nth-of-type(1) {
float: left;
}
form:nth-of-type(2) {
float: left;
}
label { /* for alining elements correctly */
display: inline-block;
width: 77px;
text-align: right;
}
input[type="text"]:not(:first-of-type) {
margin-top: 5px;
}
#status {
opacity: 0;
transition: opacity .20s;
clear: both;
}
<!doctype html>
<html lang="es-ES">
<head>
<title>.:_My Exercise_:.</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta charset="utf-8"/>
</head>
<body>
<main>
<form id="form1" action=""> <!--action="#" onsubmit="return false"-->
<fieldset>
<legend>Please introduce new person...</legend>
<label>firstName:</label>
<input id="firstName" type="text" autofocus tabindex="1"/>
<input type="button" value="Add" onclick="add()"/> <br/>
<label>secondName:</label>
<input id="secondName" type="text" tabindex="2"/>
<input type="button" value="Show" onclick="show()"/> <br/>
<label>bornYear:</label>
<input id="bornYear" type="text" tabindex="3"/>
<input type="button" value="Sort" onclick="sort()"/>
</fieldset>
</form>
<form>
<fieldset>
<legend>Sort...</legend>
<input type="button" value="a-z" onclick=""/>
<input type="button" value="z-a" onclick=""/>
</fieldset>
</form>
<p id="status"></p>
<p id="output"></p>
</main>
<script src="script.js"></script>
</body>
</html>
最佳答案
我认为您想要的是在控制台中显示一条消息。为此使用 console.log()
。它在 Firefox
中为我工作。
例子:
// ... (your previous code)
if ( firstName.value.length>0 && secondName.value.length>0 && bornYear.value.length>0 ) {
myArray[myArray.length] = [firstName.value ,secondName.value ,bornYear.value ];
console.log("good");
alert('is good');
}
else {
console.log("bad");
alert('is bad');
}
// ...
关于javascript - [HTML DOM].style 未定义? (html5 应用程序 : address book),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38880398/
这两个文件之间的主要区别是什么:styles.xml (res\values\styles.xml) 和 styles.xml (res\values-v21\styles.xml ? 针对旧的and
我正在尝试将按钮样式设置为看起来像我在 Android Full Width ICS style Minimalist Bottom ButtonsViews 中询问的那些按钮. 我已经成功了,有兴趣
只是想检查一下: 如果我有 Style.css 和 Style.min.css(在同一目录中)并且我的 html 页面引用了 Style.css,浏览器/服务器是否会下载 Style.min.css?
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the he
从上面的问题,我认为这会相对容易,但我找不到任何关于如何向“样式”下拉菜单添加样式的文档。谁能把我推向正确的方向? 最佳答案 样式下拉列表会根据主题的typography.css 文件中的类自动填充。
我有两种风格 还有这个 如果我尝试在这样的对象上使用第二个 编译器抛出这个错误: 错误 16 Style 对象不能影响它所应用的对象的 St
我想知道是否有关于在 Lisp 中使用标签的标准做法。我一直在弄乱这里第一个答案中描述的算法的 Lisp 实现 Generating permutations lazily我当前的版本使用标签来分解部
我想以编程方式获取样式为“ButtonBar”的 LinearLayout 的背景颜色。 我试过用LinearLayout的getBackgroundColor,没找到方法。 有人有想法吗?问候 最
我在扩展 javax.swing.text.DefaultStyledDocument 的类中遇到间歇性问题。该文档正在发送到打印机。大多数情况下,文档的格式看起来是正确的,但有时却并非如此。看起来格
我想将所有元素设为边框。我想这样做: * { box-sizing: border-box; } 如何使用 React 的内联样式做到这一点?我不想在每个组件中都写这个规则... 最佳答案 这是不
当我创建一个 Android 应用程序项目时,我在 (android:theme="@style/AppTheme") 上的 AndroidManifest.xml 中出现错误 找不到与给定名称匹配的
一种风格ol.layer.Vector可以设置为 ol.style.Style ,样式函数或 ol.style.Style 的数组.数组的用途和作用——与仅传递 ol.style.Style 相比目的
我的意思是内部风格 #div {color:red;} document.getElementsByTagName('style').innerHTML 不工作... document.style
http://synergine.net/rain.php 你好。我试图清除 .ripple div 中所有元素的样式属性,但没有成功: function contact(level){ focus_
我使用 vue 和 v-for 循环来创建跨度。以下是使用 bootstrap4 的背景颜色的一种样式的成功: {{ group }} export default {
有没有办法只存储元素的当前样式状态,这样我就可以搞砸样式然后再重置它? 类似于(虽然这不起作用):http://jsfiddle.net/843Pj/ var el=document.getEleme
我正在尝试将 tinymce 配置为不允许在 style 属性中使用 css 样式。 我只想允许一种样式,即文本装饰。这是一个类似的问题 http://tinymce.moxiecode.com/pu
我对style.css做了一些修改,上传到网上。但是它没有显示我需要的结果。即它仍然采用旧的 style.css 代码。 我可以离线查看更改,但是当我给它完整的 href 链接时,它没有显示必要的结果
我添加到 web 文件夹下的样式文件夹似乎没有被我的 JSP 上的调度程序 servlet 映射。我明白了 WARN : org.springframework.web.servlet.PageNot
是否有任何用于 JQuery 数据表的 Metro Style CSS 样式插件? 最佳答案 看看here 或者您可以自己创建一个。 Metro 风格很容易用 Segoe 字体复制 关于jquery
我是一名优秀的程序员,十分优秀!