我有一系列 if 陳述句來確定location.href引數。我以前從未設定過這樣的東西。
我希望throughput=,userNum=和conEff=更新為 URL 中的引數。但由于某種原因，我的 userNum 破壞了 JS。
這是我的例子：
function goPBFour(event) {
//something wrong with number of users updating the url
event.preventDefault();
const formData = new FormData(event.target);
const userNum = formData.get("userNum");
if (document.querySelector("input[name=throughput]").checked) {
if (document.querySelector("input[name=user]").checked) {
if (document.querySelector("input[name=conEff]").checked) {
window.location.href = "evalportalb4.html" location.search "&throughput=true" "&userNum=" userNum "&conEff=true";
} else {
window.location.href = "evalportalb4.html" location.search "&throughput=true" "&userNum=" userNum;
}
} else if (document.querySelector("input[name=conEff]").checked) {
window.location.href = "evalportalb4.html" location.search "&throughput=true" "&conEff=true";
}
} else if (document.querySelector("input[name=user]").checked) {
if (document.querySelector("input[name=conEff]").checked) {
window.location.href = "evalportalb4.html" location.search "&userNum=" userNum "&conEff=true";
} else {
window.location.href = "evalportalb4.html" location.search "&userNum=" userNum;
}
} else if (document.querySelector("input[name=conEff]").checked) {
window.location.href = "evalportalb4.html" location.search "&conEff=true";
} else {
window.location.href = "evalportalb4.html" location.search;
}
}<form id="myForm" onsubmit="goPBFour(event)" method="get">
<div id="pBFContainer" class="container">
<div id="bodyFOption1">
<input type="checkbox" name="throughput" value="yes" />Would you like to test the user experience throughput?
<p></p>
</div>
<div id="bodyFOption2">
<input type="checkbox" name="user" value="yes" onsubmit="goPBFour(event)" />Would you like to test capacity performance (concurrent users)?<br /> How many Users:<input type="number" id="numberUsers" size="3" name="userNum" placeholder="2" min="2"
max="12" disabled required/> (Evaluate limits 2-12 users)
<p></p>
</div>
<div id="bodyFOption3"><input type="checkbox" name="conEff" value="yes" />Would you like to test connection efficiency?</div>
</div>
<input type="submit" id="subButton" value="Next..." />
</form>
<script type="text/javascript" src="evalportalp1.js"></script>uj5u.com熱心網友回復：
你的 js 有一些問題，我用更少的重復使它變得更簡單了
function goPBFour(event) {
//something wrong with number of users updating the url
event.preventDefault();
const formData = new FormData(event.target);
const userNum = formData.get("userNum");
let new_link = "evalportalb4.html" window.location.search;
if (document.querySelector("input[name=throughput]").checked) {
new_link = "&throughput=true";
}
if (document.querySelector("input[name=user]").checked) {
new_link = "&userNum=" userNum;
}
if (document.querySelector("input[name=conEff]").checked) {
new_link = "&conEff=true";
}
window.location.href = new_link;
}
有一個失蹤</div>，我把它<script></script>移到了里面<body>。
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<form id="myForm" onsubmit="goPBFour(event)" method="get">
<div id="pBFContainer" class="container">
<div id="bodyFOption1">
<input type="checkbox" name="throughput" value="yes" />Would you like to test the user experience throughput?
<p></p>
</div>
<div id="bodyFOption2">
<input type="checkbox" name="user" value="yes" onsubmit="goPBFour(event)" />Would you like to test capacity performance (concurrent users)?<br />
How many Users:<input type="number" id="numberUsers" size="3" name="userNum" placeholder="2" min="2" max="12" disabled required/> (Evaluate limits 2-12 users)
<p></p>
</div>
<div id="bodyFOption3"><input type="checkbox" name="conEff" value="yes" />Would you like to test connection efficiency?</div>
</div>
<input type="submit" id="subButton" value="Next..." />
</div>
</form>
<script type="text/javascript" src="evalportalp1.js"></script>
</body>
</html>
在閱讀location.href時，我想到了這個https://developer.mozilla.org/en-US/docs/Web/API/Location，也許使用起來會更好location.replace()？
uj5u.com熱心網友回復：
通過將FormData與URLSearchParams物件結合，您可以使這變得更加容易和動態。
在您的示例FormData中，從表單中提取所有值，并通過省略輸入disabled或非輸入以智能方式執行此操作checked，因此您已經可以使用它而不是檢查每個單獨的輸入。
location.search通過傳遞給新URLSearchParams實體來獲取當前 URL 引數。然后遍歷FormData物件并將每個鍵和值傳遞給URLSearchParams物件。結果應該是被表單中的值覆寫的 URL 中的當前引數。
const form = document.querySelector('form');
form.addEventListener('submit', event => {
event.preventDefault();
const formData = new FormData(event.target);
const params = new URLSearchParams(location.search);
// Overwrite the params with values from the form.
for (const [key, value] of formData) {
params.set(key, value);
}
// Construct a new URL with the params.
const url = new URL(location.origin);
url.pathname = '/evalportalb4.html';
url.search = params;
// location.href = url;
console.log(url);
});
// Enabling and disabling of number of users field.
const testUserPerformance = document.querySelector('#testUserPerformance');
const numberOfUsers = document.querySelector('#numberOfUsers');
testUserPerformance.addEventListener('change', event => {
numberOfUsers.disabled = !event.target.checked;
});.as-console-wrapper { max-height: 38px; }<form>
<div>
<label>
<input type="checkbox" name="throughput" value="yes" />
Would you like to test the user experience throughput?
</label>
</div>
<div>
<label>
<input id="testUserPerformance" type="checkbox" name="user" value="yes" />
Would you like to test capacity performance (concurrent users)?
</label>
</div>
<div>
<label>
How many Users:
<input id="numberOfUsers" type="number" id="numberUsers" size="3" name="userNum" placeholder="2" min="2" max="12" disabled required/>
</label>
</div>
<div>
<label>
<input type="checkbox" name="conEff" value="yes" />
Would you like to test connection efficiency?
</label>
</div>
<button>submit</button>
</form>uj5u.com熱心網友回復：
有很多問題，我試圖重寫它。這就是我所在的地方
你的邏輯過于復雜，而不是干燥（不要重復自己）
我越看這個，我想知道為什么不只是有表格？
document.getElementById("myForm").addEventListener("submit", function(event) {
const userNum = document.getElementById("numberUsers").value;
let loc = "evalportalb4.html" location.search;
const throughput = document.querySelector("input[name=throughput]").checked;
const userChecked = document.querySelector("input[name=user]").checked;
const conEff = document.querySelector("input[name=conEff]").checked;
if (userChecked) loc = "&userNum=" userNum;
if (throughput) loc = "&throughput=true"
if (conEff) loc = "&conEff=true";
alert(loc); // for debugging
event.action = loc; // go to the URL
})<form id="myForm" method="get">
<div id="pBFContainer" class="container">
<div id="bodyFOption1">
<input type="checkbox" name="throughput" value="yes" />Would you like to test the user experience throughput?
<p></p>
</div>
<div id="bodyFOption2">
<input type="checkbox" name="user" value="yes" />Would you like to test capacity performance (concurrent users)?<br /> How many Users:<input type="number" id="numberUsers" size="3" name="userNum" placeholder="2" min="2" max="12" disabled required/> (Evaluate limits 2-12 users)
<p></p>
</div>
<div id="bodyFOption3"><input type="checkbox" name="conEff" value="yes" />Would you like to test connection efficiency?</div>
</div>
<input type="submit" id="subButton" value="Next..." />
</form>
<script type="text/javascript" src="evalportalp1.js"></script>如果您洗掉了選擇上的禁用，那么表單應該可以作業
<form id="myForm" method="get" action="evalportalb4.html"
<div id="pBFContainer" class="container">
<div id="bodyFOption1">
<input type="checkbox" name="throughput" value="yes" />Would you like to test the user experience throughput?
<p></p>
</div>
<div id="bodyFOption2">
<input type="checkbox" name="user" value="yes" />Would you like to test capacity performance (concurrent users)?<br /> How many Users:<input type="number" size="3" name="userNum" placeholder="2" min="2" max="12" required/> (Evaluate limits 2-12 users)
<p></p>
</div>
<div id="bodyFOption3"><input type="checkbox" name="conEff" value="yes" />Would you like to test connection efficiency?</div>
</div>
<input type="submit" id="subButton" value="Next..." />
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/496340.html
標籤：javascript html 形式 if 语句