#javascript #html #css
#javascript #HTML #css
Вопрос:
Я новичок в мире JS, и для своей практики пытаюсь создать простое поле ввода, в котором пользователи могут переключать (показывать / скрывать) свой пароль.
Пока я добавляю все (иконки и css), но я не знаю, почему у меня эта ошибка в моем JS-коде, просто запустите код, и вы увидите.
Кроме того, мои значки каким-то образом перепутались, я не знаю, как это исправить.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
html,
body {
height: 100%;
}
* {
margin: 0;
padding: 0;
text-decoration: none;
font-family: 'Roboto', sans-serif;
box-sizing: border-box
}
body {
background-color: #f9fbff
}
.source-image {
width: 100%;
background-repeat: no-repeat;
background-size: auto;
position: fixed;
max-width: 100%;
display: block
}
#login-form {
width: 460px;
background: 0 0;
padding: 80px 40px;
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
margin: 20px 0
}
.input_img {
position: absolute;
bottom: 20px;
left: 13px;
height: 30px
}
#login-form h1 {
text-align: center;
margin-bottom: 60px;
color: #191c3c;
font-size: 30px
}
.logoHolder>img {
width: 60%;
margin-bottom: 12px;
margin-left: auto;
margin-right: auto;
display: block
}
#login-form p {
font-size: 16px;
color: #333
}
#login-form p a {
color: #191c3c;
text-decoration: underline;
font-weight: 700;
}
#login-form p {
font-size: 16px;
color: #333
}
#login-form .entryText {
font-size: 15px;
text-align: center;
}
#login-form p a:focus {
border: 1px solid #515772
}
#login-form label {
color: #4a4d67;
font-weight: 700;
margin-bottom: 10px !important
}
.input-box {
position: relative;
margin: 30px 0
}
.input-box input {
font-size: 15px;
color: #333;
border: 1px solid #51577245;
width: 100%;
line-height: 1.2;
font-size: 18px;
outline: 0;
background: #fff;
padding: 0 5px;
height: 72px;
border-radius: 5px;
padding-left: 57px;
box-shadow: 0 3px 11px 0 rgba(81, 87, 114, .2);
margin-top: 15px
}
.input-box input:focus {
border: 1px solid #515772
}
.input-box span::before {
content: attr(data-placeholder);
position: absolute;
top: 50%;
left: 5px;
color: #515772;
transform: translateY(-50%);
z-index: -1;
transition: .5s;
padding-left: 20px
}
.validation {
border-color: #c00000 !important;
margin-bottom: 7px;
}
.feedback {
color: #c00000;
}
.error {
color: #c00000;
font-weight: bold;
text-align: center;
margin: 30px 0;
}
::placeholder {
margin-left: 60px;
color: #8b8d9d;
font-size: 14px;
font-weight: 700;
}
.cursor {
width: 17px
}
.input-box span::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: linear-gradient(120deg, #2196F3, #FF5722);
transition: .5s
}
.focus span::before {
top: -5px
}
.focus span::after {
width: 100%
}
.login-btn {
display: block;
width: 100%;
height: 62px;
border: none;
background: #515772;
background-size: 200%;
color: #fff;
outline: 0;
cursor: pointer;
margin: 20px 0 0;
border-radius: 8px;
transition: .5s;
font-size: 18px;
letter-spacing: 1px;
font-weight: 700
}
.login-btn:focus {
border: 2px solid #000
}
.login-btn:hover {
background-color: #2d3142
}
.bottom-links {
margin-top: 30px;
text-align: center;
font-size: 13px
}
.versionText {
background: transparent;
position: fixed;
inline-size: -webkit-fill-available;
bottom: 10px;
z-index: 10;
text-align: right;
font-size: 13px;
margin-right: 20px;
}
.bottom-links>p>a {
text-decoration: underline;
}
.bottom-links>p {
margin-bottom: 30px;
}
@media (max-width:768px) {
#login-form {
top: 45%;
padding: 0;
}
.source-image {
display: none
}
.versionText {
right: 0% !important;
align-items: center;
text-align: center;
}
}
@media (max-width:576px) {
#login-form {
width: 90%;
top: 50%;
padding: 0;
}
.source-image {
display: none
}
.versionText {
right: 0% !important;
align-items: center;
text-align: center;
}
}
@media (max-width:320px) {
#login-form {
width: 90%;
top: 50%;
padding: 0;
}
.source-image {
display: none
}
.versionText {
right: 0% !important;
align-items: center;
text-align: center;
}
}
@media (max-width:1440px) and (min-width:1024px) {
#login-form {
top: 45%;
padding: 0;
}
.versionText {
right: 0% !important;
align-items: center;
text-align: center;
}
}
@media (max-width:1440px) {
.source-image {
display: none
}
}
.version {
font-size: 13px;
margin-top: 10px;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.field-icon {
float: right;
margin-left: -25px;
margin-top: -25px;
position: relative;
z-index: 2;
}
#password {
background-image: url("https://img.icons8.com/material-sharp/20/000000/visible.png");
background-position: 97% center;
background-repeat: no-repeat;
}
#password.visible {
background-image: url("https://img.icons8.com/material-outlined/20/000000/invisible.png");
}
#toggle-password {
display: none;
}
#toggle-password label {
text-indent: -9999px;
display: inline-block;
width: 20px;
height: 20px;
margin-left: -32px;
cursor: pointer !important;
}
</style>
<script>
const password = document.getElementById("password");
const togglePassword = document.getElementById("toggle-password");
togglePassword.addEventListener("click", toggleClicked);
function toggleClicked() {
password.classList.toggle("visible");
if (this.checked) {
password.type = "text";
} else {
password.type = "password";
}
}
</script>
</head>
<body onload="sf();">
<div class="wrapper">
<main>
<form id="login-form" method="post" name="f">
<div class="input-box">
<label for="password">Pass </label>
<input id="password" name="password" type="password" tabindex="2">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAMAAADDpiTIAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAC91BMVEUAAABRUWtTWHFSWHRRV3JRWHNRV3JRWHNSV3JRV3FRWHJRV3NRV3JRV3JSV3JRV3JRVnFSV3JSWHNTVnJQVXOAgIBOVXFQVnNRVnJRVnJRV3JRV3JRV3FRV3FQV3NRV3FVVXdRVXNQWHNRV3JRV3JRV3JRV3JQV3FRWHJPVnFRXXRRV3RSV3JRV3JRV3JTWXFAQIBQVnFQV3JRV3JRVnFSWHNSVnBRV3JRV3JSW3ZRV3FRV3NRV3JQV3JSWHJPWHIAAABSWHJRVnFSV3JRV3JRV3FRV3JSVnFVVW1TVnFRV3JRV3JVVVVOWW9QVnJRV3JQV3NRV3FQV3JSWHJRV3JRV3JRV3JRV3JRV3JRWHJTWXRRVnFRV3JPVXFVVXFRV3JmZmZRV3JJSW1RWXFQV3FLWnhSV3FRV3JOWHZSV3JRV3FSWnNRWHJSV3FRVnJSXHBRVnJgYIBNTWZRV3JRV3JSWHFRV3JRV3JQWHJRVnJRV3JRWHJRV3JRV3FRV3JRVnFVVYBRWHJRWHNNWXNTWnFQWHBTWXNRV3JRV3JTWHJRVnJQVXBRWHNRVXBSVnNQWHJTVnNRWXRSV3JPWHFRV3JRV3JOVW9SV3JVVXFRWHNRV3FQV3JRV3NQV3FQV3NRWHNRV3JQV3JRVnJQV3VRV3JSV3JQVnNRWXNGXXRRV3JRVnFRV3JRWHJQWHRSVnJSV3JQVnJQVnJOTnZRV3JSV3BQV3JVVWpRV3JQVnNQV3JRV3NRV3JRV3JRV3JRV3FRVnFSWHJQWHFRV3JSV3NPWHRSV3JRV3BRV3JRVnJRVnFRV3NQUHBRV3JQV3NSWHFRV3JQVnJSV3FSWHNQVnFRV3JRWHJRVXFQV3JSV3JTWnVRV3JQV3JPWHJNVXRVVW9RWHJRV3NRWHJQV3JVVXVRVnJRV3JSV3NRV3NRV3NJW21SV3JQV3NRV3FRV3JSWHNRVnJPVXNQVXFRV3JSV3JRV3JVVXFSV3NRWHJQVnJRWHJRV3NRV3IAAADWSV9LAAAA 3RSTlMAEzRLXnGEl6y/zNjd7vTXq3BdSjMCJFCRsdLy0ZBvTw88ZsTz dWid00WLGfcoSsEfLXvtHo7VbMch8/ zoY6AYDj2 J12XMVRPaqAxd5/LtYy1fQ1s3TyskuvbwtEv0F6wdIRhGZ6hqvth9raroZ5ggKL9Ra9fdgiL7D5WH6XwajqRQiICjk5zHpMOw5PkNHQjg98Ogn3gnGrY KbEmgpGllIyaJWUULx4WbbkBBnIJ/Dfsy4QyYdqWn MFy2mhOY7A1N5YpuYuOeBDtlVFMU8hUVo10P6jFJfG4HSEewJ6akhi34LKBWw6TjH57g2IqNsKf3xttnVymUiljUm0AAAABYktHRACIBR1IAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH5AcDDREFyv/EBgAAFnFJREFUeNrtnfuDlVW9hzeEIjAzYDEwBqIMbIeLxiQIdtjmBhnjMjJ4UEMhZkwGETTBYkalMyJXiUAiRSrBDEQ4h4NcBC8jlQFpCXhLTaXSExiip7Koo 5fDhMSM9O vPtda73PWvv9Pn/B nyfz8zs e73EomEixYtP9XqlFNbn9ambbu8vPz8gkSiID8/L6992zYdWp96 qc/07EFfULBCIWdOp9edMZnuyQy0qXrGWd2O6tTIX1iQRdndy8u6tEzs/mmRM8p6dW7D312QY3CvueWnJet sac97nifvK7wE1Ku3/ /P4q8k QP CCgaV0GiE7 gwqydch/wQFFxZ/gc4keKRw4L8Njum0f5zYRV 8OE5nEzLSb0iefvknGFrUPU4HFNLQb8gl5uwfZ5h0wFb6lF1q2v5x2n1pOJ1VaE7hiJKRwehvIDqqdzmdWGjEZRcY/MOfnLzRsiWyhU5FAf7wN/o1UNKPTi4co/uoCkJ/A7Exven0Yafw8raU/eP8 1jZFHPEe1/B6m/gylZSAYgRV9Hyj/PlQXF6FGFkxDha/Emuls8CQXPNeFp6UyZ8hZ5IqJhYhH3yT0VliewFgqKq FpadzL69/oqPZlwcF07WnUq2k iZxMCqifTmtMxSr4mMsyg62nH6ckvpieU00y5gRacmanT6CnlLPEbs764m6DLTXF6UrlJnwtptV752s30rHKRSdNpr965XjaDuplRZOBCX3PEJt9CTyy3 PqVtNJs YbshjUys4b2mT21t9JTyxlKb6Nl mNyFT253GD47bRJv8yS/wY0MNChT//N ebF9PTc5z/qaIsqRO g5 c48SG0QlWK4vQMXWb2nbQ/debMoKfoLtVtaHs66DGXnqOrzGtHu9PDlfPpSbrJgoW0OV3c1ZeepYsssvzSj2z41mJ6mu7R8tu0NZ30X0LP0zWWdqGd6aXgbnqibnEdcsO3SWqW0TN1ie/U0r70E11GT9Udljtx7V 21HyXnqsrLNb6jEd7uKcjPVk36JtTn/8bc608U8YDnRz jcT966gp2s/c40/6pHkPrmFOAMrv0c7Mss4uVo4LYXfpw2ZpoM8USgdP6D9mOd esY2U0zbCYJV9JTtZbV1D34xQcUyes62Mj9nFwBNyZ9HT9pOVlry2D/zXCH/CiTjAdpLcPyQnrWNdKOtBMmD9LTt4 IoLSVI6uSbwWZUD6OdBMvQifTELWMObSRoTqMnbhc/on0Ej9w12Ig1XWgdwVOwlp66PVQF T3b10956FV6x5eNK 6en0ksr66et6iSetWPTRnXLB3ImwopeduDf8Z1MwrBv/Xxv9O8/Fr4qZuj1wR2D56Mz13W2gZyMij47eM2OrlOFsfHnJ7IP TbnuUnrwdVAXw4p/trc/akc2ZtnZ bKj5U11VSs/eCi4wPeeF/l7327Hom6ZP9jg9extYYfYmkNonNvm Bqfw7ifrjR5uZCd6 jzxp0xO NJTWqgdb 7OH5s83/g4PX cnxgc71M/1XABXmHnWQaP DQ9f5q5xu4Civ1sl65D7jb3nPJvV9MGYPaYmuwYbfobMFeBM2kDLH23mRnrOO1fty419JLiup/TDlCeMTLU6cXl o8ab3WXkcOOoR2QnGViotuezWrn452tvzCysvwUbYFjtol/sbpq/ePflMUm/g5cEt73TZ6uf5rRC6pMnrjq8wYeXRzaO0XW36t9lu2Nf7/SsZ32Q08P61Xiv9Q ypL15k 9skj7sb9Em2DYofv6i55jgzn4ugLNB7/W09fUOccWzWP8cWAPZF2g xVWo2kXBNX36B3igLODO/tzU/WefW AZ7eGU/XOcJ B3U9qSlvrPf0W2kbwrN rc4CxIUGfv1ulzvPvDeDTq2VovRWw7vLgA8zU jXGTbSPoCnP0zi96H4iwvM6L2W6L9C/YBYwVuPwaiYxGTbpfKLtC7SRgHlR3 ii11EhdD7TehxtJFiW6ptc3fNcjGX1 nIMpJ0Eymna5lbxEpnjZX1fEI inQTJZfq U7uRTaLvtuZomJ4iO1rb2B6io/xKW5RX6CjBEdf2QGj wav6Hm57aZzOEhh365rZVSvpKJHILYN1pXmVjhIYr2ma2F4rnrg47VpNce6kkwRFi3o9A6tcTSc5zsOa/hWoDcuDo1Zp omx5iu0zZoCnUsHCYgeesb1a2vW56Wa3nJxOx0kGL6g54vUnq/TQU4y7w0tkSqn0EECQdPF4K3oHI25VU mcFwgvkHLrKbSMZryppZQs gYQXAgpmNUBb hczRlmpavhmO/pXMEQJmWnxXrflmeoiXWKXSMAJilY1Bt8RVwc8q1POvsd3QM81RruZTOwqetd9fxp23b2XQM47ysw/ TdIpkdNCRDLm6MVDe0jCl2ml0imT8pl5DtLfpFKaJ63j44i/oFMn5Hw3RhsbpFIZZpGFIBZfRKZLz xoN4QK7wRFCx3Nhv0iHSMWzGsLl nVBE9RHVKD48E9zDNfwK AgHcIspRoWZkV0iNTsU0/3hjXfcRqho/qEKtbQIVIzT8OlIdfQIYyyUX1AHegM6dBwhWhu3yaq4WrApXSGdLyqnu8JOoNR1F/D0S5OZ0iL sNjDtERTDJN/QdkJ50hPY rJzxAZzCI hcB9XPpDOnpo/66KfRmR8Oovx/u 3SETLyjHPEPdASDqD91/2U6QiYOK0e8gY5gkO2qw6mx/mFKW0eqZsyjI5jjOeVrJubQETKjvAqIvUtHMIb6c0Fm0hEy00o55BI6gjGU7wmrdOAhCsOV73vJ3TvElB v SKdwAvKL5U4QicwxhjV0VhzO2g6lJ Ba9k9LxpRfjCIhRcD/yubVFO2pxOYorBecTJ1Trxa4xbVJ2DVxukIhjig qOxgU7gjXGqOW mExjiu6qDeY9O4I0fqObM1f8DP606mIBeCaPKOtWch kEhnhfdTAL6ATe6Kea83/pBIZ4THEuIx25XrKqXjHoHjqBIVS35M48UHuwYtBcfWxwG8W5PEAH8MoPFYOOpwMY4huKc3FiD9jAHxWDdqUDGEL19et30AG88ifFoAvpAIZQvVzO6gvCG/MdxaC1dAAzvKs4lsR8OoFX5qkm3UEnMMJ81bE48U1AAztUk bmw8L rDiVGjqAd1RfJrWCDmCExYpT2U4H8M5CxahfoQMY4QPFqQymA3inq2LUXXQAI6h GfgXOoB3fq0YNTdfIaf6opgJdADv3K4YdRMdwAifUZzK XQA7xxUjIq9C9UonRWn4tAtU2coRj2LDmCElxSn0oEO4B3Vh4bm5g3CgxSn4tCXpKMUow6iAxhBCiAFkAJIAaQAUgApgBRACiAFkAJIAaQAUgApgBRACiAFkAJIAaQAUgApgBRACiAFkAJIAaQAdAAjSAGkAFIAKYAUQAogBZACSAGkAFIAKYAUQAogBZACSAGkAFIAKYAUQAogBZACSAGkAFIAKYAUgA5gBCmAFEAKIAWQAkgBpABSACmAFEAKIAWQAkgBpABSACmAFEAKIAWQAjhdgNd/ buhqu EEjwTHdqmVyfaeSOmvFVBjyR8VDxizVvml6u EFDwxfWWvEdvieorkgSf1C6n3TcwRX7 Mabb8Ffgr/QUwswjtP1jn//l8x9IBf /wGh6BuGmF 0/8hQ9gnDThvYfGUaPINwcov0rvxNeUCJK 4/QEwg7tH8pAAztXwoAQ/uXAsDQ/qUAMLR/KQAM7V8KAEP7lwLA0P6lADC0fykADO1fCgBD 5cCwND pQAwtH8pAAztXwoAQ/uXAsDQ/qUAMLR/KQAM7V8KAEP7lwLA0P6lADC0fykADO1fCgBD 5cCwND pQAwtH8pAAztXwoAQ/uXAsDQ/qUAMLR/KQAM7V8KAEP7lwLA0P6lADC0fykADO1fCgBD 5cCwND pQAwtH8pAAztXwoAQ/uXAsDQ/qUAMLR/KQAM7V8KAEP7lwLA0P6lADC0fykADO1fCgBD 5cCwND pQAwtH8pAAztXwoAQ/uXAsDQ/qUAMLR/KQAM7V8KAEP7lwLA0P6lADC0fykADO1fCgBD 5cCwND pQAwtH8pAAztXwoAQ/uXAsDQ/qUAMLR/KQAM7V8KAEP7lwLA0P6lADC0fykADO1fCgBD 5cCwND pQAwtH8pAAzt39kCVB595sjmXsUzZxb32nzkmUMx jx of07WYD8GzYuXtk0xspFG3 WT5/LD7R/9wow/b2W5cmjlO/61V306bKG9u9YAba9tro8XZry1XMq6DNmB 3fqQJES9ZmDjS/qJY ZzbQ/h0qQMWev3mLdGByJX1W79D 3SnARbu9h3r0Rfq0nqH9u1KAng8WZpOq/MYC sQeof07UoAr 2aba0VX szeoP27UYCSW7IPNqOIPrUnaP8uFKDyQX/RVrnwWZD270ABomP9ZtvvwD EtH/7C9Dzbv/hRvSkT58R2r/1BYguU0m3qZ4 fyZo/7YXoPJltXidbd8M0/5tL4DPz38n TudIAO0f8sLMFk94Ft0hvTQ/u0uwJd9/P/fnBlX0CnSQvu3ugAFP9eRcG0XOkc6aP9WF AmPRFX0TnSQfu3uQBty9XjNVB4NZ0kDbR/iwtQmcX3v lpafFOmPZvcQFa6wv5Np0lNbR/ewtQ91t9IQ9E6TQpof3bW4C3dab8PzpNSmj/1hag4nWdKddso/OkgvZvbQHm6I3Zgc6TCtq/tQVYrTfm83SeVND bS3AvaV6Y5baes8Q7d/WArynO eZdKIU0P5tLcAu3TmX04lSQPu3tAD9NW2BT1Len86UHNq/pQW4QX/Qd hMyaH9W1qAjfqDnk5nSg7t39ICLNIf9FE6U3Jo/3YWoFLDlUDNWW/nU2Ro/3YW4JCJpMPoVEmh/dtZgGdMJB1Dp0oK7d/OAuwzkXQfnSoptH87C7DZRNI/0qmSQvu3swBlJpI TqdKCu3fzgL8xETSB lUSaH921mAD00k/ZBOlRTav50FWGci6To6VVJo/3YW4FYTSf9Ep0oK7d/OAmi6JagpN9GpkkL7t7MA75tIOoROlRTav50FMLIIak2nSgrt384CnG8i6VQ6VVJo/3YWYJiJpAvpVEmh/dtZgEQL/UEn0pmSQ/u3tACv6g 6ic6UHNq/pQVYpT/oRjpTcmj/lhbgNf1B59CZkkP7t7QA98zWnbNKLgt3qQCJEbpzTqITpYD2b2sBinTnPEInSgHt39YCHI3rjRk/RCdKAe3f1gIkJumNeR2dJxW0f2sLoHkbfJDOkwrav7UFiGl5SugJVlj7oDjav7UFSOzRmfIxOk1KaP/2FqBmir6Qf6uh06SE9m9vARJ36gv5EZ0lNbR/iwsQW6or40A77wv9B7R/iwuQuEjTY0LKB9NJ0kD7t7kAuq4NtfqtMbR/qwtQq U5EdeMpHOkg/ZvdQESl5ytHnBrOzpFWmj/dhcgMUo9oLUPiT0O7d/yAiR2quZ7hU6QAdq/7QWIFavFu9XaHfAn0P5tL0Ci8rBKukG2vzhUCpCRCt8vD49E9lv7moB/Qvu3vwCJ6NN s/2ojj57Zmj/DhQgkZhc5SdZ W30ub1A 3eiAImnhmcfrNrOx8I1h/bvRgESA7IPdiF9Zm/Q/h0pwJPZB3uSPrM3aP OFODZ7IM9S5/ZG7R/RwrQLftg3egze4P270gBXsg 2Av0mb1B 3ekAB9kH wD szeoP07UgAfF4hOoc/sDdq/GwWo83FxWKG9L4xuDO3fjQL4eoGErXcDNoX270YBevhJ1oM tSdo/24UwMceyJVNEO3fjQL42AO5sgmi/btRAB97IFc2QbR/NwrwsZ9kH9On9gTt340C NgDubIJov27UYCb/SRzYxNE 3eiAH72QK5sgmj/ThTA54tEndgE0f6dKMAsf9Gc2ATR/p0ogK89kCObINq/EwW43180JzZBtH8nCrDRXzQnNkG0fycK4GsP5MgmiPbvRAF87YEc2QTR/p0ogK89UCRyM31uL9D XSiAvz2QI5sg2r8LBfC5B3JjE0T7d6EAPvdAbmyCaP8uFMDnHsiNTRDt34UC NwDubEJov27UACfeyA3NkG0fxcK4HMP5MYmiPbvQgF2 c3mwiaI9u9CAXzugdzYBNH HShAXaHfbC5sgmj/DhTgqP9wDmyCaP8OFMD3HigSmUWfPTO0fwcK8JH/cA5sgmj/DhTA9x7IiU0Q7d BAvjeAzmxCaL9O1CA/f7DObAJov07UADfeyAnNkG0fwcK4HsP5MQmiPZvfwH874Gc2ATR/u0vgMIeyIVNEO3f/gIo7IFc2ATR/u0vgMIeyIVNEO3f/gIo7IEikfvp02eE9m9/ART2QJHIRvr0GaH9218AhT2QC5sg2r/9BVDYA7mwCaL921 A36uks38TRPu3vgAqeyAXNkG0f sLoLQHcmATRPu3vgB/UYs3iz5/Jmj/1hdAaQ/kwCaI9m99AR5Si2f9Joj2b30B/q4Wz/pNEO3f gIo7YEc2ATR/q0vQEu1eLvo82eC9m99AXy8L6wx1j8xmvZvfQHeVYv3HH3 TND rS/ADilAuAuwRi3eWvr8maD9W1 AdWrxPqTPnwnav/UF KtavAfo82eC9m99AeovU0nXp5Y fyZo/9YXIHGmSroj9OkzQvu3vwCx5/2HWxajT58R2r/9BUjsXe4325K99NkzQ/t3oACJmrH oq2roU/uAdq/CwVIJCbszj7Y8vH0qT1B 3ejAInE0X2vHB7kmcNle6y/FuwTaP uFCBnof1LAWBo/1IAGNq/FACG9i8FgKH9SwFgaP9SABjavxQAhvYvBYCh/UsBYGj/UgAY2r8UAIb2LwWAof1LAWBo/1IAGNq/FACG9i8FgKH9SwFgaP9SABjavxQAhvYvBYCh/UsBYGj/UgAY2r8UAIb2LwWAof1LAWBo/1IAGNq/FACG9i8FgKH9SwFgaP9SABjavxQAhvYvBYCh/UsBYGj/UgAY2r8UAIb2LwWAof1LAWBo/1IAGNq/FACG9i8FgKH9SwFgaP RCnoC4aaC9h95gx5BuOlP 48spEcQbobR/iPt6RGEm3No/5EX6RGEm /R/iOv0SMIN0/Q/iN/oEcQbt6n/Udm0iMINz5fh6SRjvQIws0i2n9kdgE9gzBTM5v2H4l8jR5CmDlI2z/GaHoIYaaMtn M3fQQwkxH2v4xCofRUwgv2wtp w3cRo8hvJxKu/8Hf6bHEF4W0O6P05aeQ1gZR5v/hFb0IMLKYdr8J5RfQk8inJxXSps/wbn0KMLJ07T3f/JV U8Q4Ohs2vtJBtHDCCOdaeuNOZ eRvh4k3behE619DzCRv1a2nlTyuiBhI2dtPFmxM gJxIuBsRp482ZeIieSZgY1oL2/a9cLB8DAmPkbtp2Mnpvo cSFio pl0np1WMnkw4iNmzAmxGmTQgAGKv0J5Tc4f8FTBORTFtOR0/HUnPJ9epf4F2nJ4l8r2QUbZb fm/MS0G0DPKZd6ZSPvNTLxMFgKGqN0Zp 16Ys1UelK5yQRLrgH1wEvb6WHlHkf301azYXarS mB5Rb3dZtBO82S0g/H0UPLHa4 XE779MOCIXn05HKBhUVfp036prDl42/K8wMUKDhY1tGK /8UmP3o5Vs 2nDO9nx6mC6Rv/2cDR9tuXxRlXE9/w/IHHW2TSlagwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wNy0wM1QxMzoxNzowNSswMDowMD7FP 0AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDctMDNUMTM6MTc6MDUrMDA6MDBPmIdRAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm 48GgAAAABJRU5ErkJggg=="
class="input_img" alt="">
<input type="checkbox" id="toggle-password" />
<label for="toggle-password">Show Password</label>
</div>
<button type="submit" class="login-btn" tabindex="3" name="Submit">Login</button>
</form>
</main>
</div>
</body>
</html> Кто-нибудь может мне помочь с этим?
Комментарии:
1. Поместите свой скрипт в конец вашего HTML-файла, перед закрывающим
</body>тегом. Ваш HTML анализируется сверху вниз. Поэтому, когда он достигает вашего JavaScript, форма еще не существует, и, таким образом, выбор элементов из нее приведет кnullзначениям.nullобычно является показателем того, что не найден или не существует при выборе элементов.2. вы вызываете метод, который вы еще не создали:
<body onload="sf();">3. @EmielZuurbier, отлично, ошибка исчезла, но я не могу нажать на значок и показать пароль.
Ответ №1:
Вы пытаетесь выполнить функцию sf, которая не определена. Я не вижу этой функции в вашем коде. Вы пытаетесь найти переключатель-пароль до того, как он отобразится на странице. Удалите onload из body и добавьте свои скрипты в конце тега body.
Для быстрого исправления метки переключения добавьте это в свой стиль #toggle-password label, но я думаю, что идея с использованием этой метки плохая:
#toggle-password label {
{
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
Вы также должны улучшить стиль замка, используя это:
.input_img {
position: absolute;
top: 50%;
left: 13px;
height: 30px;
transform: translateY(-50%);
}
Я меняю нижнюю часть с верхней на 50% и добавляю translate transfrom в положение calc из центра значка