如果 Statement 不起作用，则在回调函数中；
[英]in a callBack function if Statement is not working;
问题描述
在这里我的这部分代码不起作用我不知道是什么问题，以及为什么它不起作用。 请帮助我。 这是我的代码不起作用的部分，我在代码中尝试了类似的代码，不完全是这个，但几乎相似的一个它完美地工作，但这是不工作的。
function transform(){
if ( value1.innerText== "Feet" && value2.innerText== "Meter"){
} else if( value1.innerText=="Feet" && value2.innerText== "Meter"){
console.log("hello")
}
else if( value1.innerText=="Meter" && value2.innerText==="Feet"){
console.log("hello")
}
} `
//LELBEL VALE SELECTION const value1= document.querySelector(".value1"); const value2= document.querySelector(".value2"); console.log(value1.innerText, value2.innerText); // VALUE INPUT SELECTION const value1Input= document.querySelector(".value1-input"); const value2Input= document.querySelector(".value2-input"); //CONVERTING THIS VALUE INTO NUMBER // Selectiong the button chhose const choice= document.querySelector(".pickup"); const convert= document.querySelector(".convert"); console.log(choice.value); // USING CHANGE EVENT TO CHANGE THE LEBEL VALUE choice.addEventListener("change", function(){ if (choice.value==="Feet-to-Meter"){ value1.innerText= "Feet:"; value2.innerText= "Meter:"; } if (choice.value==="Meter-to-Feet"){ value1.innerText= "Meter:"; value2.innerText= "Feet:"; } }) convert.addEventListener("click", function(e){ e.preventDefault(); return transform(); }) //GRABING THE LEBEL VALUE AND USING THE CONVERT BUTTON TO GET THE RESULT function transform(){ if ( value1.innerText== "Feet" && value2.innerText== "Meter"){ console.log("hello"); } else if( value1.innerText=="Feet" && value2.innerText== "Meter"){ console.log("hello") } else if( value1.innerText=="Meter" && value2.innerText==="Feet"){ console.log("hello") } }
.feet-to-meter{ width:40vw; height:auto; background:#e8c245; overflow:hidden; position:absolute; top:50%; left:50%; transform:translate(-50%, -80%); } legend{ font-family:arabic-indic; font-weight:900; font-size:1.5rem; padding-top: 10px; } form{ height:100%; } input{ padding:10px; font-size:1.1rem; } lebel{ font-size: 2rem; } .variables{ display: flex; align-items: cneter; } fieldset{ border:2px solid lightcyan; height:65%; width:50%; } .pick{ width:50%; height: 100%; } select{ padding:1.2rem; font-size:1rem; } .button-group{ display:flex; justify-content:space-around; width:80%; height:18%; align-items:center; padding-bottom:10px; } .button-group> button{ padding: 5px 15px; } @media only screen and (min-width: 1328px){ body{ background-color: rgb(0, 0, 0); } } @media only screen and (max-width: 999px){ body{ background-color: aquamarine; } .feet-to-meter{ width:100vw; height:300px; background:#e8c245; overflow:hidden; position:absolute; top:90%; left:50%; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="conversition.css" class="css"> </head> <body> <div class="feet-to-meter"> <form> <div class="variables"> <fieldset> <legend class="legend"> FEET TO METER </legend> <lebel style="margin-right:33px;" class="value1"> Feet </lebel> <input class="value1-input" type= "number"> <br/> <lebel class="value2"> Meter </lebel> <input style="margin-bottom:10px;" class="value2-input" type= "number"> </fieldset> <div class="pick"> <h2> Format <select class="pickup"> <option> PICK YOUR FORMAT </option> <option value="Feet-to-Meter"> Feet To Meter </option> <option value="Meter-to-Feet"> Meter To Feet </option> </select> </h2> </div> </div> <div class="button-group"> <button class="convert"> CONVERT </button> <button class="meter-to-feet"> METER TO FEET </button> </div> </form> </div> <script src="conversion.js"></script> </body> </html>
2 个解决方案
解决方案1
0 2022-06-15 14:42:52
如您所见，这些选择器的 innerText 中有空格
const value1= document.querySelector(".value1");
const value2= document.querySelector(".value2");
<lebel style="margin-right:33px;" class="value1"> Feet </lebel>
<lebel class="value2"> Meter </lebel>
解决方案2
0 2022-06-15 14:56:03
您需要清除选择器的 innerText 中的空格。
为此，只需在您的transform()函数中添加.trim()方法以清除空格。
旧功能
function transform(){
if ( value1.innerText== "Feet" && value2.innerText== "Meter"){
console.log("hello");
} else if( value1.innerText=="Feet" && value2.innerText== "Meter"){
console.log("hello")
}
else if( value1.innerText=="Meter" && value2.innerText==="Feet"){
console.log("hello")
}
}
新的和改进的功能。
function transform() {
if (value1.innerText.trim().includes("Feet") && value2.innerText.trim().includes("Meter")) {
console.log("hello");
}
else if (value1.innerText.trim().includes("Feet") && value2.innerText.trim().includes("Meter")) {
console.log("feet clicked")
}
else if (value1.innerText.trim().includes("Meter") && value2.innerText.trim().includes("Feet")) {
console.log("hello")
}
}
我使用了includes()方法，因为您的选择器还包含一个额外的:字符，在检查字符串相等性时可能会导致冲突。
更多关于 .trim() 方法修剪方法 W3School
和 .include()包含方法 Javascript
回调 function 理解和返回语句
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.