2016-05-30 15 views
-2

私のウェブサイトのHTMLとJavaScriptコードを書いていますが、私が望むのは2つの答え、はいといいえでドロップダウンします。 「はい」を選択すると、非表示のフォームフィールド(およびその横のボタン)が表示され、使用可能になります。私の問題は、表示されたフォームを非表示にして、それ以外の方法では(私が望む方法で)コードを動作させることです。HTMLとJavascript:if文で非表示のフォームフィールドを表示する

私が使用しているコードは、これがうまくいくと思いました。あなたは、関数outputname()

<html> 
 

 
<body> 
 

 
Are you a Patron? <br> 
 
<select id="patronAnswer"> 
 
    <option value="no">No</option> 
 
    <option value="yes">Yes</option> 
 
</select> <button name="name" type="button" onclick="patron()" id="patronSubmit">Submit</button> <br> 
 

 

 
<form id="form1"> 
 
<input name="name" type="text" size ="20" style="display:none" placeholder="Email used for patreon"> 
 
<button id="feildButton"type="button" onclick="outputname()"style="display:none">Submit</button> 
 
</form> 
 

 
<script> 
 
function patron() { 
 
    var patronUser = document.getElementById("patronAnswer"); 
 
    x=patronUser.options.selectedIndex 
 
    console.log (x) 
 
    if (x === 1) { 
 
    document.getElementById("form1").style.display="block"; 
 
    } 
 
} 
 

 
function outputname() { 
 
var email=document.getElementById("form1"); 
 
y=email.elements["name"].value; 
 
if (y==="[email protected]"|| 
 
    y==="[email protected]"|| 
 
    y==="bob"|| 
 
    y==="billy"){ 
 
    var down1 = confirm("You will be given the most current build"); 
 
    if (down1){ 
 
    var url = "https://drive.google.com/uc?export=download&id=0B8KkXdbkXf67WlJhQUg0QWJMUFU" 
 
    var a = document.createElement('a'), 
 
    ev = document.createEvent("MouseEvents"); 
 
a.href = url; 
 
a.download = url.slice(url.lastIndexOf('/')+1); 
 
ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, 
 
        false, false, false, false, 0, null); 
 
a.dispatchEvent(ev); 
 
    } 
 
    else if (down1===false) { 
 
    confirm ("download canceled") 
 
    } 
 
} 
 
    else { 
 
    var down2=confirm("You have not earned the level 2 reward, you will be given the public build."); 
 
    if (down2){ 
 
    var url = "https://drive.google.com/uc?export=download&id=0B8KkXdbkXf67T3dUQUlOTmhYQXc" 
 
    var a = document.createElement('a'), 
 
    ev = document.createEvent("MouseEvents"); 
 
a.href = url; 
 
a.download = url.slice(url.lastIndexOf('/')+1); 
 
ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, 
 
       false, false, false, false, 0, null); 
 
a.dispatchEvent(ev); 
 
    } 
 
    else if (down2===false){ 
 
    confirm ("download canceled") 
 
    } 
 
    } 
 
    } 
 

 

 

 
</script> 
 

 
<p id="demo"></p> 
 
</body> 
 

 
</html>

はここではなく、私が望むように動作するものの一例である後何も心配する必要はありません。再びoutputname後に何も心配する必要はありません()

<html> 
 

 
<body> 
 

 
Are you a Patron? <br> 
 
<select id="patronAnswer"> 
 
    <option value="no">No</option> 
 
    <option value="yes">Yes</option> 
 
</select> <button name="name" type="button" onclick="patron()" id="patronSubmit">Submit</button> <br> 
 

 

 
<form id="form1"> 
 
<input name="name" type="text" size ="20" style="display:block" placeholder="Email used for patreon"> 
 
<button id="feildButton"type="button" onclick="outputname()"style="display:none">Submit</button> 
 
</form> 
 

 
<script> 
 
function patron() { 
 
    var patronUser = document.getElementById("patronAnswer"); 
 
    x=patronUser.options.selectedIndex 
 
    console.log (x) 
 
    if (x === 1) { 
 
    document.getElementById("form1").style.display="none"; 
 
    } 
 
} 
 

 
function outputname() { 
 
var email=document.getElementById("form1"); 
 
y=email.elements["name"].value; 
 
if (y==="[email protected]"|| 
 
    y==="[email protected]"|| 
 
    y==="bob"|| 
 
    y==="billy"){ 
 
    var down1 = confirm("You will be given the most current build"); 
 
    if (down1){ 
 
    var url = "https://drive.google.com/uc?export=download&id=0B8KkXdbkXf67WlJhQUg0QWJMUFU" 
 
    var a = document.createElement('a'), 
 
    ev = document.createEvent("MouseEvents"); 
 
a.href = url; 
 
a.download = url.slice(url.lastIndexOf('/')+1); 
 
ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, 
 
        false, false, false, false, 0, null); 
 
a.dispatchEvent(ev); 
 
    } 
 
    else if (down1===false) { 
 
    confirm ("download canceled") 
 
    } 
 
} 
 
    else { 
 
    var down2=confirm("You have not earned the level 2 reward, you will be given the public build."); 
 
    if (down2){ 
 
    var url = "https://drive.google.com/uc?export=download&id=0B8KkXdbkXf67T3dUQUlOTmhYQXc" 
 
    var a = document.createElement('a'), 
 
    ev = document.createEvent("MouseEvents"); 
 
a.href = url; 
 
a.download = url.slice(url.lastIndexOf('/')+1); 
 
ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, 
 
       false, false, false, false, 0, null); 
 
a.dispatchEvent(ev); 
 
    } 
 
    else if (down2===false){ 
 
    confirm ("download canceled") 
 
    } 
 
    } 
 
    } 
 

 

 

 
</script> 
 

 
<p id="demo"></p> 
 
</body> 
 

 
</html>

答えて

0

[OK]を、今私は私がそれをしたいどのようにそれを持って!基本的には、私が必要としていた部分的な作業をしていましたが、新しい問題は、ページがフォームを表示するときに表示されるので、ページをロードするときにフォームを隠すコードを追加することでした。これはまさに私がそれを望んでいた方法です!ご協力ありがとうございました!

ここで、新しいコードは次のようになります。

<html> 
 

 
<body> 
 

 
Are you a Patron? <br> 
 
<select id="patronAnswer"> 
 
    <option value="no">No</option> 
 
    <option value="yes">Yes</option> 
 
</select> <button name="name" type="button" onclick="patron()" id="patronSubmit">Submit</button> <br> 
 

 

 
<form id="form1"> 
 
<input name="name" type="text" size ="20" style="display:block" placeholder="Email used for patreon"> 
 
<button id="feildButton"type="button" onclick="outputname()"style="display:block">Submit</button> 
 
</form> 
 

 
<script> 
 
document.getElementById("form1").style.visibility="hidden" 
 

 
function patron() { 
 
    var patronUser = document.getElementById("patronAnswer"); 
 
    x=patronUser.options.selectedIndex 
 
    console.log (x) 
 
    if (x === 1) { 
 
    document.getElementById("form1").style.visibility="visible"; 
 
    } 
 
    else{ 
 
    document.getElementById("form1").style.visibility="hidden"; 
 
    var down2=confirm("You have not earned the level 2 reward, you will be given the public build."); 
 
    if (down2){ 
 
     var url = "https://drive.google.com/uc?export=download&id=0B8KkXdbkXf67T3dUQUlOTmhYQXc" 
 
     var a = document.createElement('a'), 
 
    ev = document.createEvent("MouseEvents"); 
 
    a.href = url; 
 
    a.download = url.slice(url.lastIndexOf('/')+1); 
 
    ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, 
 
        false, false, false, false, 0, null); 
 
    a.dispatchEvent(ev); 
 
    } 
 
    else if (down2===false){ 
 
     confirm ("download canceled") 
 
    } 
 
    } 
 
    } 
 

 
function outputname() { 
 
var email=document.getElementById("form1"); 
 
y=email.elements["name"].value; 
 
if (y==="[email protected]"|| 
 
    y==="[email protected]"|| 
 
    y==="bob"|| 
 
    y==="billy"){ 
 
    var down1 = confirm("You will be given the most current build"); 
 
    if (down1){ 
 
    var url = "https://drive.google.com/uc?export=download&id=0B8KkXdbkXf67WlJhQUg0QWJMUFU" 
 
    var a = document.createElement('a'), 
 
    ev = document.createEvent("MouseEvents"); 
 
a.href = url; 
 
a.download = url.slice(url.lastIndexOf('/')+1); 
 
ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, 
 
        false, false, false, false, 0, null); 
 
a.dispatchEvent(ev); 
 
    } 
 
    else if (down1===false) { 
 
    confirm ("download canceled") 
 
    } 
 
} 
 
    else { 
 
    var down2=confirm("You have not earned the level 2 reward, you will be given the public build."); 
 
    if (down2){ 
 
    var url = "https://drive.google.com/uc?export=download&id=0B8KkXdbkXf67T3dUQUlOTmhYQXc" 
 
    var a = document.createElement('a'), 
 
    ev = document.createEvent("MouseEvents"); 
 
a.href = url; 
 
a.download = url.slice(url.lastIndexOf('/')+1); 
 
ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, 
 
       false, false, false, false, 0, null); 
 
a.dispatchEvent(ev); 
 
    } 
 
    else if (down2===false){ 
 
    confirm ("download canceled") 
 
    } 
 
    } 
 
    } 
 

 

 

 
</script> 
 

 
<p id="demo"></p> 
 
</body> 
 

 
</html>

関連する問題