私のウェブサイトの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>