Нужна помощь по JavaScript
1 сообщение
#3 года назад
Доброго времени суток. Только вникаю в это все. Нужно сделать так, чтобы дела из правого столбца, при нажатии на кнопку, переходили в левый. Пример прикрепила. Буду благодарна, если кто объяснит как это сделать. Делаю для себя. В html уже прописала так:
<!DOCTYPE html>
<html>
<head>
<title>Список дел</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="jquery-3.5.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<main id="central-container">
<div class="fixed-container">
<aside id="column-left">
<div id="h1">Список дел:</div>
<div id="empty">Список пуст...</div>
<div>
<div class="buyHorse">
<p id="textHorse"><button type="submit" id="delete"></button></p>
<p id="aboutHorse"></p>
</div>
<div class="callMom">
<div id="textMom"><button type="submit" id="delete"></button></div>
<div id="aboutMom"></div>
</div>
</div>
</aside>
<aside id="column-right">
<div id="h2">Добавить новое дело</div>
<div id="window">
<div id="name">* Название</div>
<input type="text" name="" id="nametext" required="required">
<div id="about">* Описание</div>
<textarea id="abouttext" cols="42" rows="12" required="required"></textarea>
<button id="button" type="submit">Добавить дело</button>
</div>
</aside>
</body>
</html>
В css:
html, body {
margin: 0;
padding: 0;
min-width: 1000px;
font-family: Arial;
background: #EEEEE0;
z-index: 5;
}
.fixed-container {
width: 960px;
margin: 20px 210px;
position: relative;
}
#column-left {
width: 480px;
height: 300px;
float: left;
}
#h1 {
font-size: 20px;
padding: 27px 0;
margin: 0;
}
#empty {
font-size: 15px;
padding: 0;
margin: 0;
color: grey;
}
.buyHorse {
margin-top: 0;
padding: 10px;
width: 400px;
height: 150px;
float: left;
background-color: white;
margin-bottom: 20px;
display: none;
}
#textHorse {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #e5e5e5;
font-size: 15px;
padding: 5px 5px 10px;
}
#delete {
background-image: url(clear.png);
width: 8px;
height: 14px;
margin: 0 0 0 20px;
}
#aboutHorse {
font-size: 12px;
color: grey;
padding: 10px 5px;
}
.callMom {
padding: 10px;
width: 400px;
height: 150px;
float: left;
background-color: white;
margin-bottom: 20px;
display: none;
}
#textMom {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #e5e5e5;
font-size: 15px;
padding: 5px 5px 10px;
}
#aboutMom {
font-size: 12px;
color: grey;
padding: 10px 5px;
}
#column-right {
width: 480px;
float: left;
}
#h2 {
font-size: 20px;
padding: 27px 0;
margin: 0;
float: left;
}
#window {
width: 400px;
float: left;
background-color: white;
}
#name {
padding: 40px 40px 10px 40px;
color: grey;
font-size: 12px;
}
#nametext {
margin: 0 40px;
width: 300px;
height: 40px;
border: 1px solid #DDDDDD;
padding: 0 15px;
}
#about {
padding: 27px 40px 10px;
color: grey;
font-size: 12px;
}
#abouttext {
margin: 0 40px;
padding: 20px 15px;
width: 300px;
height: 140px;
border: 1px solid #DDDDDD;
font-size: 14px;
}
#button {
margin: 27px 40px 40px;
width: 200px;
height: 50px;
background-color: #0077CC;
color: white;
}
11416 сообщений
#3 года назад
Изучайте Jquery, с его помощью сможете выполнить данную операцию.
1 сообщение
#3 года назад
dariashults, здравствуйте. Сам только начинаю изучать эту тему но думаю смогу вам помочь. В хтмл есть несколько незакрытых тегов и дублируется id="delete". id должно быть уникальным. Насколько я понимаю вы не пользуетесь редактором с подсветкой ошибок. Советую VisualStudioCode. Скидываю файлы с рабочим javascript кодом. Что-то типа Этого?
Приложения:
2 КБ