Question

基本上我得到了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>

Answer 1

它是SCSS，而不是CSS。您需要先将其转换为CSS才能起作用。除此之外，请尝试将脚本移到body标签的末尾，而不是head标签的内部。

Answer 2

这是已编译的css->

html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

form {
  padding: 20px 0 40px;
}
form .field {
  padding: 10px 0;
  margin: 5px 0;
  display: inline-block;
  width: 100%;
}
form .field label {
  float: left;
  display: block;
  margin-right: 2.3576520234%;
  width: 40.291369653%;
  padding: 5px 10px;
}
form .field label:last-child {
  margin-right: 0;
}
form .field input {
  float: left;
  display: block;
  margin-right: 2.3576520234%;
  width: 57.3509783236%;
  padding: 5px 10px;
}
form .field input:last-child {
  margin-right: 0;
}

.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.container::after {
  clear: both;
  content: "";
  display: block;
}

.search_person {
  float: left;
  display: block;
  margin-right: 2.3576520234%;
  width: 48.8211739883%;
}
.search_person:last-child {
  margin-right: 0;
}

.add_person {
  float: left;
  display: block;
  margin-right: 2.3576520234%;
  width: 48.8211739883%;
}
.add_person:last-child {
  margin-right: 0;
}

.all_persons {
  float: left;
  display: block;
  margin-right: 2.3576520234%;
  width: 31.7615653177%;
  margin-left: 34.1192173411%;
}
.all_persons:last-child {
  margin-right: 0;
}
.all_persons #all_list {
  list-style-type: none;
  margin: 20px 0;
  padding: 0;
}
.all_persons #all_list li {
  margin: 0 0 30px;
  text-align: left;
}

尝试使用此选项，而不是您正在使用的CSS / SCSS。它会工作。欢呼！

CSS文件故障

2 个答案: