使用JavaScript

时间：2016-12-02 16:06:43

标签： javascript html css forms

我尝试做的是每当我点击我的签名表单中的输入字段时，我希望表单看起来像这样。

enter image description here

我目前通过在包含整个表单的div元素（＃my-sub-container-02）上使用...：hover来实现上述结果（它在下面给出的代码中被注释掉了）。我想要做的是（连同悬停），只要我的任何输入字段聚焦（点击并且光标等待用户输入），就会出现黑色背景。

我解决了尝试使用JavaScript（JS）的问题。在JS中，我尝试使用这种方法，每当我点击任何输入字段时，它应该将我的div的背景设置为在我给出的第一个屏幕截图中显示。请注意我在下面写的JS文件中，我目前只使用名字的第一个输入字段。我特意给它一个ID，使JS中的东西更容易。到目前为止，我还没有摆弄其他输入字段。

我可以告诉你，直到onclick的JS文件正在工作，也就是说，点击第一个输入字段＆＃34;转换＆＃34;函数被成功调用。您可以替换这些ID以确保＆＃34; my-sub-container-01＆＃34; （这是针对表格左侧的文字）和＆＃34; my-sub-container-02-submit＆＃34; （文字＆＃34;在表格下面的按钮上提交＆＃34;）。如果在替换中使用上述ID中的任何一个，那么每个ID的相应元素将被用于替换。字体颜色应该变成＆＃34;红色＆＃34;当单击第一个输入字段（名字）时。

但是，每当我尝试在注册表单上使用样式时，都没有任何变化。 ）JS文件中的当前ID用于注册表单。）

如果我不应该使用JS来解决这个问题，请指导我应该使用什么。在再次寻求帮助之前，我一定要自己解决这个问题。

HTML，CSS和JS文件如下。我也使用Bootstrap中的一些类，但是我没有把它放在文件长度很大的地方。 （http://getbootstrap.com）

提醒：CS​​S / JS / Images的路径是根据我在系统中的方式设置的。

HTML 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sign Up</title>
    <link rel="stylesheet" type="text/css" href="CSS/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="CSS/style.css">
    <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
</head>
<body>
<div class="site-hd container">
    <h1>F U N G&nbsp&nbsp&nbsp&nbsp&nbsp&nbspE N T R Y&nbsp&nbsp&nbsp&nbsp&nbsp&nbspT E S T</h1>
</div>
<div id="my-container-01">
    <div class="container">
        <div class="col-6 col-m-12" id="my-sub-container-01">
            <h2>Are you looking the best way to prepare your Entrance Test Exam?</h2>
            <p id="my-sub-container-text-01">This website is your complete resource to get admission in the top ranked universities of Pakistan. Our team consists of toppers from several universities. We have collected more than 2000 MCQs from Past Papers of NUST, MCAT, GIKI, PIEAS and FAST, over the last three years and are making them available to you through this platform. Join us for practicing past paper MCQs, getting tips from the toppers, learning tricks to solve MCQs and having sincere advice at each stage of your entry test.</p>
        </div>
        <div class="col-6 col-m-12" id="my-sub-container-02">
            <h2 id="my-sub-container-hd-02">Sign Up</h2>
            <form id="my-sub-container-02-signupform" name="SingupForm">
                <div>
                  <input class="my-sub-container-02-input" id="Test" type="Name" name="FName" placeholder="Enter First Name">
                  <input class="my-sub-container-02-input" type="Name" name="LName" placeholder="Enter Last Name";>
                </div>
                <div>
                  <input class="my-sub-container-02-input" type="email" name="Email" placeholder="Enter email">
                </div>
                <div>
                  <input class="my-sub-container-02-input" type="password" name="Password" placeholder="Enter password">
                </div>
                <div>
                  <label class="my-sub-container-02-label"><input type="checkbox"> Remember me</label>
                </div>
                <button id="my-sub-container-02-submit" type="submit">Submit</button>
            </form>
        </div>
    </div>
</div>
<footer>
    <p>Something something</p>
</footer>
<script type="text/javascript" src="js/myjs.js"></script>
</body>
</html>

CSS 

* 
{
    box-sizing: border-box;
}

/*The columns inside a row are all floating to the left, and 
are therefore taken out of the flow of the page, and other 
elements will be placed as if the columns do not exist. To 
prevent this, we will add a style that clears the flow:*/

.site-hd
{
    font-family: 'Cinzel', serif;
    text-align: center;
}

#my-container-01
{
    background-image: url("../Images/pexels-photo-176851.jpeg");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#my-sub-container-01
{
    color: white;
    font-weight: 900;
    font-family: 'Cinzel', serif;
    padding-right: 50px;
    text-align: justify;
}

#my-sub-container-text-01
{
    font-size: 20px;
}

#my-sub-container-02
{
    margin-top: 40px;
    transition: ease-in 1s;
}

/*#my-sub-container-02:hover
{
    background-color: rgba(0,0,0,0.7);
    border-radius: 3px;
    box-shadow: 2px 2px black;
}*/

#my-sub-container-hd-02
{
    font-family: 'Cinzel', serif;
    color: white;
    padding: 0px 40px 0px 40px;
    margin-left: 30%;
}

.my-sub-container-02-input
{
    margin: 20px 35px 15px 40px;
    border-radius: 10px;
    padding: 5px;
    background-color: #272822;
    color: white;
}

.my-sub-container-02-input:focus
{
    outline: none !important;
}

.my-sub-container-02-label
{
    margin: 20px 35px 15px 44px;
    color: white;
    font-family: 'Cinzel', serif;
}

#my-sub-container-02-submit
{
    margin-left: 40%;
    padding: 8px 25px 8px 25px;
    border: 2px solid #00689d;
    border-radius: 4px;
    background-color: #8bac39;
    /*background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
    font-family: 'Cinzel', serif;
    font-size: 20px;
    color: white;
}

.row
{
    width: 100%
}

.row::after 
{
    content: "";
    clear: both;
    display: block;
}


[class*="col-"] {
    float: left;
    padding: 15px;
}


[class*="col-"] 
{
    /*mobile*/
    width: 100%;
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

的JavaScript 

"Use Strict"
// Declarations on Top
// It is a good coding practice to put all declarations at the top of each script or function.

// This will:

// Give cleaner code
// Provide a single place to look for local variables
// Make it easier to avoid unwanted (implied) global variables
// Reduce the possibility of unwanted re-declarations


function validateForm() 
{


    var a, b, c, d;
    a = document.forms["SingupForm"]["FName"].value;
    b = document.forms["SingupForm"]["LName"].value;
    c = document.forms["SingupForm"]["Email"].value;
    d = document.forms["SingupForm"]["Password"].value;
    if (a == "" || b == "" || c == "" || d == "") 
    {
        if (a == "")
            alert("First Name field must be filled out");
        else if (b == "")
            alert("Last Name field must be filled out");
        else if (c == "")
            alert("Email field must be filled out");
        else if (d == "")
            alert("Password field must be filled out")
        return false;
    }
    else
    {
        alert("Form successfully submitted"); 
        // onclick(document.getElementById("sub-btn").innerHTML = "<a href='http://www.google.com'> Google </a>");
    }
}

function transition()
{
    document.getElementById("my-sub-container-02-signupform").style.color="red";
}

function init()
{
    var SignUpForm;

    SignUpForm = document.getElementById("my-sub-container-02-signupform");
    SignUpForm.onsubmit = validateForm;

    var translation;

    translation = document.getElementById("Test");
    translation.onclick = transition;
}

window.onload = init();

0 个答案:

没有答案
相关问题
最新问题