ramil_bayramov
@ramil_bayramov
Beginner programmer of HTML,CSS,JS

Что не так с моим кодом (относительно JS)?

сделал это
<div class="container">
            <h2>Create your Google Account
            </h2>
        <div class="padding">
            <form onsubmit="submit('firstName', 'lastName', 'email', 'password', 'confirm');">
                <input type="text" id="firstName" class="firstName" placeholder="  First name"   onclick="firName();">
                <input type="text" id="lastName" class="lastName" placeholder="  Last name"  onclick="laName();">
                <br>
                <input type="email" id="email" class="email" placeholder="  Username"  onclick="firName();">
                <br>
                <span>You can use letters, numbers & periods                                                                                                                                                                                                                                    
                </span>
                <br>
                <span class="a"><a href="#" class="a">Use my current email address instead</span>
                <br>
                <input type="password" id="password" class="password" placeholder="  Password"  onclick="firName();">
                <input type="password" id="confirm" class="confirm" placeholder="  Confirm"  onclick="firName();">
                <p class="f">Use 8 or more characters with a mix of letters, numbers & <br>symbols</p>
                <p></p>
                <a href="file:///C:/Users/sds63/Desktop/HTML%20CSS/getElementById.html" class="s">Sign in instead</a>
                <input type="submit" value="Next" class="submit">
            </form>
        </div>
      </div>


body {
    width: 99%;
    height: 100%;
}
.container {
    width: 59%;
    height: 510px;
    border: 1px solid #d6d3d3;
    border-radius: 8px;
    margin: 30px auto;
}
h2 {
    margin: 80px 0 12px 35px;
    padding: 0px 0px 29px 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    letter-spacing: -.6px;
    font-size: 1.6em;
}
.padding {
    margin-left: 32px;
    margin-right: 347px;
}
input {
    border: 1px solid #d6d3d3;
    border-radius: 4px;
    padding: 10px 0;
    font-family: Arial, Helvetica, sans-serif;
}
.firstName {
    width: 162px;
    margin-right: 12px;
    margin-bottom: 21px;
    padding-left: 10px; 
}
.lastName {
    width: 162px;
    padding-left: 10px; 
}
.email {
    width: 352px;
    position: relative;
    margin-bottom: 6px;
    padding-left: 10px; 
}
.container::after {
    content: "@gmail.com"; /* Добавляемый текст */ 
      color: #333; /* Цвет текста */  
      font-size: 90%; /* Размер шрифта */ 
      padding: 2px; /* Поля вокруг текста */
      position: absolute;
      top: 250px;
      left: 575px; 
      font-family: Arial, Helvetica, sans-serif;
      font-size: 89%;
}
span {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 74%;
    font-weight: lighter;
    color: #444343;
    letter-spacing: .1px;
}
.a {
    text-decoration: none;
    position: relative;
    top: 4px;
    font-weight: bold;
    font-size: 89%;
    color: #5367cc;
    font-family: Arial, Helvetica, sans-serif;
}
.password {
    width: 142px;
    margin: 30px 12px 0 0;
    padding-left: 10px; 
}
.confirm {
    width: 142px;
    padding-left: 10px; 
}
.f {
    font-size: 85%;
    font-weight: normal;
    color: #333;
}
.s {
    text-decoration: none;
    float: left;
    margin-top: 42px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 93%;
    font-weight: 500;
    color:  #2e50f8;
}
.submit {
    min-width: 89px;
    float: right;
    margin-top: 33px;
    background: #3052ff;
    cursor: pointer;
    transition: .1s;
    color: white;
    font-weight: 600;
    border: none;
}
.submit:hover {
    box-shadow: 0 0 1px 0px blue, 1px 1px 1px 1px blue inset;
    background:rgb(30, 53, 255);
}


function submit(g, l, e, p, c) {
    var fName = document.getElementById(g).value;
    var lName = document.getElementById(l).value;
    var email = document.getElementById(e).value;
    var password = document.getElementById(p).value;
    var confirm = document.getElementById(c).value;

    document.write(fName + " " + lName + " " + "<br>" + email + "<br>" + password + " " + confirm);

}


я хочу чтобы когда пользователь заполнил поля, данные показывалы на новой странице.Когда нажимаю на сабмит - js код не работает,подскажите что не так сделал? спасибо
  • Вопрос задан
  • 199 просмотров
Пригласить эксперта
Ответы на вопрос 1
Есть проблема с именем функции и ее прерыванием.

1. Переименуйте функцию submit во что то другое, например, в submitForm
2. Прервите отправку самой формы. Добавьте например return false;
<form onsubmit="submitForm('firstName', 'lastName', 'email', 'password', 'confirm'); return false;">


3. У вас добавлены функции при клике не поля формы. В примере они отсутствуют. Обратите на это внимание
firName() и laName()

Вот итоговый пример с исправлениями

<div class="container">
    <h2>Create your Google Account
    </h2>
    <div class="padding">
        <form onsubmit="submitForm('firstName', 'lastName', 'email', 'password', 'confirm'); return false;">
            <input type="text" id="firstName" class="firstName" placeholder="  First name"   onclick="firName();">
            <input type="text" id="lastName" class="lastName" placeholder="  Last name"  onclick="laName();">
            <br>
            <input type="email" id="email" class="email" placeholder="  Username"  onclick="firName();">
            <br>
            <span>You can use letters, numbers & periods
                </span>
            <br>
            <span class="a"><a href="#" class="a">Use my current email address instead</a></span>
            <br>
            <input type="password" id="password" class="password" placeholder="  Password"  onclick="firName();">
            <input type="password" id="confirm" class="confirm" placeholder="  Confirm"  onclick="firName();">
            <p class="f">Use 8 or more characters with a mix of letters, numbers & <br>symbols</p>
            <p></p>
            <a href="file:///C:/Users/sds63/Desktop/HTML%20CSS/getElementById.html" class="s">Sign in instead</a>
            <input type="submit" value="Next" class="submit">
        </form>
    </div>
</div>

<script>
    function submitForm(g, l, e, p, c) {
        var fName = document.getElementById(g).value;
        var lName = document.getElementById(l).value;
        var email = document.getElementById(e).value;
        var password = document.getElementById(p).value;
        var confirm = document.getElementById(c).value;

        document.write(fName + " " + lName + " " + "<br>" + email + "<br>" + password + " " + confirm);

    }

    function firName() {}
    function laName() {}
</script>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы