在CSS

在CSS

关注
发信
关注(28)粉丝(399)

javascript - 在CSS，HTML和Javascript上显示

我试图搜索类似的东西，但没有找到。

我有两个按钮。如果我单击其中之一，我想隐藏一些div，但是它不起作用。当我打开页面时，div d2和d3被隐藏，没关系。当我尝试单击一个按钮时，它单击并且不执行任何操作。
存在另一种做我想做的事吗？
难道我做错了什么？



<head><title>Aggiungi Studi e Lavori</title>
<script type='text/javascript'>

 function Funz1()
    {
        document.getElementById("d1").style.display = "none";
        document.getElementById("d2").style.display = "none";
        document.getElementById("d3").style.display = "block";

    }


function Funz2()
    {
        document.getElementById("d1").style.display = "none";
        document.getElementById("d2").style.display = "block";
        document.getElementById("d3").style.display = "none";

    }

function checkForm3()
 {
 // Controllo che tutti i campi  della registrazione vengano inseriti
    if(document.registration_form.luogo.value == '' ||
   document.registration_form.titolo.value == '' ||
   document.registration_form.anno.value == '' ||
   )
{
    alert('Inserire tutti i dati contrassegnati con un asterisco');
    return false;
}
// Se arriviamo qui va tutto bene
return true;
}

function checkForm4()
{
// Controllo che tutti i campi  della registrazione vengano inseriti
if(document.registration_form.luogo2.value == '' ||
   document.registration_form.ruolo.value == '' ||
   document.registration_form.anno2.value == '' ||
   )
{
    alert('Inserire tutti i dati contrassegnati con un asterisco');
    return false;
}
// Se arriviamo qui va tutto bene
return true;
}
</script>

<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
 <script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
 </script>
 </head>
<body>

<br>
<div id="d1">

<button type="button" onclick="Funz1()" >Aggiungi Esperienza
Lavorativa</button>
 <button type="button" onclick="Funz2()" > Aggiungi Esperienza di
Studio</button>

</div>



<div id="d2" style= display:none>
<br><form name='studio_form' action='Esperienze.php' method='post'
 onsubmit='return checkForm3()' >
        <div class='row'>

<div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'>
<label for='titolo'>Titolo</label>
<input type='text' name='titolo'>
</div>

<div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'>
<label for='anno'>Anno</label>
<input type='text' name='anno'>
</div>

<div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'>
<label for='luogo'>Luogo</label>
<input type='date' name='luogo'>
</div>



<div class='form-group col-xs-12 col-md-12 col-sm-12 col-lg-12'>
<input name='submit' type='submit' value='Aggiungi'>
</div>

</div>
</form>
</div>








<div id="d3" style= display:none>
<form name='lavoro_form' action='Esperienze.php' method='post'
onsubmit='return
checkForm4()' disabled>
        <div class='row'>

<div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'>
<label for='ruolo'>Ruolo</label>
<input type='text' name='ruolo'>
</div>

<div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'>
<label for='anno2'>Anno</label>
<input type='text' name='anno2'>
</div>

<div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'>
<label for='luogo2'>Luogo</label>
<input type='date' name='luogo2'>
</div>



<div class='form-group col-xs-12 col-md-12 col-sm-12 col-lg-12'>
<input name='submit' type='submit' value='Aggiungi'>
</div>

</div>
</form>
</div>

 </body>



</html>

最佳答案

您正在用if()完成||。因此该代码将期望其他条件，而不是结束标记。



<head><title>Aggiungi Studi e Lavori</title>
<script type='text/javascript'>

 function Funz1()
    {
        document.getElementById("d1").style.display = "none";
        document.getElementById("d2").style.display = "none";
        document.getElementById("d3").style.display = "block";

    }


function Funz2()
    {
        document.getElementById("d1").style.display = "none";
        document.getElementById("d2").style.display = "block";
        document.getElementById("d3").style.display = "none";

    }

function checkForm3()
 {
 // Controllo che tutti i campi  della registrazione vengano inseriti
    if(document.registration_form.luogo.value == '' ||
   document.registration_form.titolo.value == '' ||
   document.registration_form.anno.value == ''
   )
{
    alert('Inserire tutti i dati contrassegnati con un asterisco');
    return false;
}
// Se arriviamo qui va tutto bene
return true;
}

function checkForm4()
{
// Controllo che tutti i campi  della registrazione vengano inseriti
if(document.registration_form.luogo2.value == '' ||
   document.registration_form.ruolo.value == '' ||
   document.registration_form.anno2.value == ''
   )
{
    alert('Inserire tutti i dati contrassegnati con un asterisco');
    return false;
}
// Se arriviamo qui va tutto bene
return true;
}
</script>

<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
 <script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
 </script>
 </head>
<body>

<br>
<div id="d1">

<button type="button" onclick="Funz1()" >Aggiungi Esperienza
Lavorativa</button>
 <button type="button" onclick="Funz2()" > Aggiungi Esperienza di
Studio</button>

</div>



<div id="d2" style= display:none>
<br><form name='studio_form' action='Esperienze.php' method='post'
 onsubmit='return checkForm3()' >
        <div class='row'>

<div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'>
<label for='titolo'>Titolo</label>
<input type='text' name='titolo'>
</div>

<div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'>
<label for='anno'>Anno</label>
<input type='text' name='anno'>
</div>

<div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'>
<label for='luogo'>Luogo</label>
<input type='date' name='luogo'>
</div>



<div class='form-group col-xs-12 col-md-12 col-sm-12 col-lg-12'>
<input name='submit' type='submit' value='Aggiungi'>
</div>

</div>
</form>
</div>








<div id="d3" style= display:none>
<form name='lavoro_form' action='Esperienze.php' method='post'
onsubmit='return
checkForm4()' disabled>
        <div class='row'>

<div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'>
<label for='ruolo'>Ruolo</label>
<input type='text' name='ruolo'>
</div>

<div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'>
<label for='anno2'>Anno</label>
<input type='text' name='anno2'>
</div>

<div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'>
<label for='luogo2'>Luogo</label>
<input type='date' name='luogo2'>
</div>



<div class='form-group col-xs-12 col-md-12 col-sm-12 col-lg-12'>
<input name='submit' type='submit' value='Aggiungi'>
</div>

</div>
</form>
</div>

 </body>





PS：您是否尝试在浏览器中使用开发人员工具，因为这会引发错误，提示您Uncaught SyntaxError: Unexpected token )引用错误所在的行。

关于javascript - 在CSS，HTML和Javascript上显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50590647/

10-11 14:06
Powered by LMLPHP ©2024 在CSS 0.044715