个人中心
gpt4 book ai didi

javascript - 如何让我的文本输入从笔记本电脑图像屏幕的顶部开始

转载 作者：行者123 更新时间：2023-11-28 02:38:51 25 4
gpt4 key购买 nike

这是我想包含在我的投资组合中的“待办事项列表”元素。输入框中的文本从底部开始，并不断将每个额外的“待办事项”文本放在最后一个文本的下面，这样就不容易辨认了。我希望文本从页面上笔记本电脑屏幕的顶部开始。请单击链接并输入任何文本两次，您将看到我的错误。 https://nicoleirene.github.io/js-exercise-2/我的代码如下。

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="css/style.css">
        <title>JS Exercise 2</title>
    </head>
    <body>
      <h1>Lets Do This</h1>
      <form>

        <label for="user-input" >Type your to do:</label>
        <div class="wrapper">
            <input type="text" name="user-input" id="user-input" placeholder="Enter To Do!">

            <button type="submit" id="user-submit">Add To Do!</button> 
        </div> 
      </form>

      <ul id="to-do-list" class="to-do-list">

      </ul>


      <!-- Make sure script is loaded at the bottom-->
        <script src="js/app.js"></script>
    </body>
</html>

JS

var userSubmit = document.querySelector('#user-submit');
var toDoList = document.querySelector('#to-do-list');
function addToDo(event){
    event.preventDefault();

    var userInput = document.querySelector('#user-input');


    if(userInput.value === ''){
        return false;
    }

    toDoList.innerHTML = '<li><i class="fa fa-window-close close-to-do" aria-hidden="true"></i>' + userInput.value + '</li>' +  toDoList.innerHTML;

    userInput.value = '';
}

function removeToDo(event){
    if(event.target.classList.contains('close-to-do')) {
        var li = event.target.parentElement;
        toDoList.removeChild(li);

    }
}

toDoList.addEventListener('click', removeToDo, false);
userSubmit.addEventListener('click', addToDo, false);

CSS

@import url('https://fonts.googleapis.com/css?family=Raleway');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{
  font-family: 'Raleway', sans-serif;
  background-color: #FFF;
  background-image: url("../images/pixel-open-front.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  color: #000;
}
h1{
  text-align: center;
  padding:;
  background-color: blue;
  color:#FFF;
}
label{
  display: block;
  margin:right;
  text-align: center;
  background-color: red;
  color:white;
}
input{
  /*display:block;
  margin:auto;*/
}
.wrapper{
  text-align: center;
}
button{
  color:white;
  background-color:red;
  border:none; 
  padding: 5px;
  margin-top: 5px;

}
ul{
  text-align: center;
  padding: 300px;
  list-style: none;
  color:red;
}
.close-to-do{
  display: inline-block;
  margin-right: 10px;
}

最佳答案

我会以不同的方式设置它。填充可能会导致不同屏幕尺寸的问题。下面我把笔记本电脑作为列表的背景。

var userSubmit = document.querySelector('#user-submit');
var toDoList = document.querySelector('#to-do-list');

function addToDo(event) {
  event.preventDefault();

  var userInput = document.querySelector('#user-input');


  if (userInput.value === '') {
    return false;
  }

  toDoList.innerHTML = '<li><i class="fa fa-window-close close-to-do" aria-hidden="true"></i>' + userInput.value + '</li>' + toDoList.innerHTML;

  userInput.value = '';
}

function removeToDo(event) {
  if (event.target.classList.contains('close-to-do')) {
    var li = event.target.parentElement;
    toDoList.removeChild(li);

  }
}

toDoList.addEventListener('click', removeToDo, false);
userSubmit.addEventListener('click', addToDo, false);
@import url('https://fonts.googleapis.com/css?family=Raleway');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Raleway', sans-serif;
  background-color: #FFF;
  color: #000;
}

h1 {
  text-align: center;
  padding: ;
  background-color: blue;
  color: #FFF;
}

label {
  display: block;
  margin: right;
  text-align: center;
  background-color: red;
  color: white;
}

input {
  /*display:block;
  margin:auto;*/
}

.wrapper {
  text-align: center;
}

button {
  color: white;
  background-color: red;
  border: none;
  padding: 5px;
  margin-top: 5px;
}

ul {
  text-align: center;
  padding-top: 100px; /* same as top background */
  list-style: none;
  color: red;
}

ul:before {
  content: url(https://nicoleirene.github.io/js-exercise-2/images/pixel-open-front.png);
  position: absolute;
  top: 100px; /* same as padding top */
  left: 80px; 
}

.close-to-do {
  display: inline-block;
  margin-right: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>Lets Do This</h1>
<form>
  <label for="user-input">Type your to do:</label>
  <div class="wrapper">
    <input type="text" name="user-input" id="user-input" placeholder="Enter To Do!">

    <button type="submit" id="user-submit">Add To Do!</button>
  </div>
</form>
<ul id="to-do-list" class="to-do-list"></ul>

关于javascript - 如何让我的文本输入从笔记本电脑图像屏幕的顶部开始，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45549680/

25 4 0
文章推荐： javascript - removeChild 导致错误
文章推荐： html - 从网站中提取值(value)
文章推荐： javascript - iPhone safari 底部栏
文章推荐： javascript - 无法在 中保存图像
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com