javascript - 故障css文件
问题描述
基本上我得到了我的 css 文件,它将在文本下但是当我尝试打开在浏览器中使用它的 html 文件时它不起作用,css 代码将无法运行并且样式和 javascript 不起作用正因为如此。代码应该是这样的:https : //codepen.io/ritaD86/pen/MyOdQr 但它在我的浏览器中不起作用,而它在 codepen.io 上运行。我也不明白为什么 javascript 不起作用。到底是怎么回事?我能做些什么?
persons = [
person = {
firstName: "Maria",
lastName: "Fernanda",
age: "mf@desk.com",
phone: "917697967"
},
];
document.getElementById('search_button').addEventListener('click', searchPerson);
document.getElementById('add_button').addEventListener('click', addPerson);
document.getElementById('show_all').addEventListener('click', showAllPersons);
function searchPerson() {
var input = document.getElementById("search").value.toLowerCase();
var result = document.getElementById('result');
for (var i = 0; i < persons.length; i++) {
if (input === persons[i].firstName.toLowerCase() || input === persons[i].lastName.toLowerCase()) {
result.innerHTML = '<h4>I found this:</h4>' + persons[i].firstName + ' ' +
persons[i].lastName + ' </br>' + persons[i].age + ' </br>' + persons[i].phone;
return persons[i];
} else if (!isNaN(input)) {
result.innerHTML = 'Tem de inserir um nome';
} else {
result.innerHTML = 'Nenhum contacto encontrado';
}
}
}
function Person(first, last, age, phone) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.phone = phone;
}
function titleCase(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function addPerson() {
var firstName = titleCase(document.getElementById("name").value);
var lastName = titleCase(document.getElementById("lastname").value);
var age = document.getElementById("age").value;
var phone = document.getElementById("phone").value;
var newPerson = new Person(firstName, lastName, age, phone);
persons.push(newPerson);
if (newPerson.firstName != undefined) {
alert(newPerson.firstName + ' added');
} else {
alert('No person added');
}
showAllPersons();
}
function showAllPersons() {
var i;
var l;
var showButton = document.getElementById('show_all');
var list = document.getElementById('all_list');
while (list.firstChild) {
list.removeChild(list.firstChild);
}
for (var l = 0; l < persons.length; l++) {
var node = document.createElement("LI");
list.appendChild(node);
node.innerHTML =
'<p><b>Nome Completo:</b> ' + persons[l].firstName +' ' + persons[l].lastName + '</p>' +
'<p><b>Email:</b> ' + persons[l].age + '</p>' +
'<p><b>Telemovel:</b> ' + persons[l].phone + '</p>'
for (var key in person) {
var value = person[key];
}
}
showButton.disabled = true;
}
@import "bourbon";
@import "neat";
// Media queries
$desktop: new-breakpoint(min-width 960px 12);
$tablet: new-breakpoint(max-width 959px 12);
$mobile: new-breakpoint(max-width 767px 4);
// Variables
$max-width: 1200px;
form {
padding: 20px 0 40px;
.field {
@include padding(10px 0);
@include margin(5px 0);
@include display(inline-block);
@include fill-parent;
label {
@include span-columns(5);
@include padding(5px 10px);
}
input {
@include span-columns(7);
@include padding(5px 10px);
}
}
}
.container {
@include outer-container;
text-align: center;
}
.search_person {
@include span-columns(6);
}
.add_person {
@include span-columns(6);
}
.all_persons {
@include span-columns(4);
@include shift(4);
#all_list {
list-style-type: none;
margin: 20px 0;
padding: 0;
li {
margin: 0 0 30px;
text-align: left;
}
}
}
<html>
<head>
<title>Desk+ - Grupo 36</title>
<link rel="stylesheet" type="text/css" href="ab.css">
<script src="ab.js"></script>
</head>
<body>
<div class="container">
<h1>Contactos</h1>
<div class="all_persons">
<button id="show_all" type="button">Mostrar todos</button>
<ul id="all_list">
</ul>
</div>
<div class="search_person">
<h3>Insira um nome</h3>
<input type="text" id="search">
<button id="search_button" type="button">Procurar</button>
<p id="result"></p>
</div>
<div class="add_person">
<h3>Adicionar contacto</h3>
<form action="" method="post">
<div class="field">
<label for="firstname">Primeiro Nome: </label>
<input type="text" id="name">
</div>
<div class="field">
<label for="lastname">Último Nome: </label>
<input type="text" id="lastname">
</div>
<div class="field">
<label for="age">Email: </label>
<input type="text" id="age">
</div>
<div class="field">
<label for="phone">Phone: </label>
<input type="number" id="phone">
</div>
<button id="add_button" type="button">Add</button>
</form>
</div>
</div>
</body>
</html>
解决方案
它是 SCSS 而不是 CSS。您需要先将其转换为 CSS 才能正常工作。除此之外,尝试将您的脚本移动到 body 标记的末尾,而不是 head 标记内。
推荐阅读
- android - 音乐播放器停止
- python - 如何在熊猫的两列上应用条件
- pycharm - PyCharm:Jupyter 笔记本未渲染,并且无法运行
- mongodb - OCI 运行时执行失败:执行失败:container_linux.go:370:启动容器进程导致:执行:“\\”:
- authentication - 如何在 AD B2C 中将 TOTP 与用户迁移结合起来
- php - 单引号或双引号的替代方案?
- html - 标签锚和href有问题,只有HTML
- python - Py3o.template:如何从 Odoo 13 格式化 HTML 变量
- python - SVM 代码无法识别日期时间列
- javascript - ApexCharts 传递数据