用Java脚本嵌套其他语句

时间：2019-03-26 10:44:40

标签： javascript

我开始创建一个Web应用程序，用户可以在其中选择自己的年龄，性别和其他一些内容，然后将返回一条特定于其答案的信息。

我一直忽略正确学习Java脚本，因此这是一种学习体验。对我来说，最明显的方法似乎是使用if / else语句。但是，我很警惕这样做会导致代码很混乱，所以我想知道我是否仅使用纯Javascript或其他语句来追求这个项目就没有意义了。

我已经从JS开始了这项任务，但是它在某个地方发生了故障。它正确地选择了性别，然后选择了年龄，但是当我尝试根据这两个选择显示信息时，都会弄错它。

/* If you're feeling fancy you can add interactivity 
    to your site with Javascript */

// prints "hi" in the browser's dev tools console
console.log('hi');





function gender() {
  var userGender = document.getElementById("genderInput").value;
  console.log('Gender selected as ' + userGender);
}


function age() {
  var userAge = document.getElementById("ageInput").value;
  console.log('Age selected as ' + userAge);
}


function summary() {

  if (userGender = 'Male') {
  
    if (userAge = 'u35') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
    
    else if (userAge = '36-45') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
    
    else if (userAge = '46-55') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
    
    else if (userAge = '56-65') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
    
    else if (userAge = 'o65') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
  
  } else if (userGender = 'Female') {
  
    if (userAge = 'u35') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
    
    else if (userAge = '36-45') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
    
    else if (userAge = '46-55') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
    
    else if (userAge = '56-65') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
    
    else if (userAge = 'o65') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
    
  } else {
  
    console.log('nothing selected');
    
  }
  
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
    
    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head>  
  <body>
    <h1>Hi there!</h1>
    
    
    <h3>
      Gender
    </h3>
    <form id="genderApp" onsubmit="return false;">
      <select id="genderInput" name="genderSelect">
       <option value="Male">Male</option>
       <option value="Female">Female</option>
      </select>
      <input type="submit" onclick="gender()">
    </form>
    
    <h3>
      Age
    </h3>
    <form id="ageApp" onsubmit="return false;">
      <select id="ageInput" name="ageSelect">
       <option value="u35">Under 35</option>
       <option value="36-45">36-45</option>
        <option value="46-55">46-55</option>
        <option value="56-65">56-65</option>
        <option value="o65">Over 65</option>
      </select>
      <input type="submit" onclick="age()">
    </form>
    
    <button onclick="summary()">
      Summary
    </button>
    
    
    
    
    

    <!-- include the Glitch button to show what the webpage is about and
          to make it easier for folks to view source and remix -->
    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
    <script src="https://button.glitch.me/button.js"></script>
  </body>
</html>

感谢任何帮助，无论是指出此尝试中的错误还是称呼我为使用此方法进行尝试的傻瓜！

6 个答案:

答案 0 :(得分：1)

注释中指出了为什么您的代码不起作用的原因，您使用的是=而不是===。一个是赋值运算符，另一个是相等性检查。

  

我想知道我是否在追求这个项目方面偏离了目标   仅使用简单的Javascript或if else语句

您可以使用对象数组来声明响应及其约束，而不是if/else块。

const responses = [
  { 
    age: { min: 5, max: 12 }, 
    gender: 'male',
    func: function() {
      console.log('is a male between 5 - 12')
    }
  },
  { 
    age: { min: 60, max: 65 }, 
    gender: 'female',
    func: function() {
      console.log('is a female between 60 - 65')
    }
  }
]

const main = (age, gender) => {
  // find a response that matches all constraints
  const response = responses.find(response => {
    return response.gender === gender && 
      response.age.min <= age && response.age.max >= age
  })
  
  if (!response) {
    throw 'No response found for this age range/gender'
  }
  
  response.func()
}

main(8, 'male')
main(60, 'female')

这可以做得更多DRY；响应func消息可以由gender和age.min / age.max道具来计算，但这不是问题。

答案 1 :(得分：0)

只需创建一个函数，然后单击摘要即可获取性别和年龄范围

console.log('hi');


function summary() {
  var userGender = document.getElementById("genderInput").value;
  var userAge = document.getElementById("ageInput").value;
  console.log(`The user is ${userGender} and ${userAge} years old`)

}
<h1>Hi there!</h1>


<h3>
  Gender
</h3>
<form id="genderApp" onsubmit="return false;">
  <select id="genderInput" name="genderSelect">
    <option value="Male">Male</option>
    <option value="Female">Female</option>
  </select>
  <input type="submit" onclick="gender()">
</form>

<h3>
  Age
</h3>
<form id="ageApp" onsubmit="return false;">
  <select id="ageInput" name="ageSelect">
    <option value="u35">Under 35</option>
    <option value="36-45">36-45</option>
    <option value="46-55">46-55</option>
    <option value="56-65">56-65</option>
    <option value="o65">Over 65</option>
  </select>
  <input type="submit" onclick="age()">
</form>

<button onclick="summary()">
      Summary
    </button>






<!-- include the Glitch button to show what the webpage is about and
          to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>

答案 2 :(得分：0)

您在这里犯了两个错误：

  • 首先，您使用赋值运算符=处理if语句。您应该比较运算符==或===，但是在这种情况下，您不需要这样做，因为所有块都具有相同的console.log()
  • 变量userGender和userAge应该在全局范围内声明

/* If you're feeling fancy you can add interactivity 
    to your site with Javascript */

// prints "hi" in the browser's dev tools console
console.log('hi');
var userGender;
var userAge;
function gender() {
  userGender = document.getElementById("genderInput").value;
  console.log('Gender selected as ' + userGender);
}
function age() {
  userAge = document.getElementById("ageInput").value;
  console.log('Age selected as ' + userAge);
}
function summary() {
  console.log(`The user is ${userGender} and ${userAge} years old`);    
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
    
    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head>  
  <body>
    <h1>Hi there!</h1>
    
    
    <h3>
      Gender
    </h3>
    <form id="genderApp" onsubmit="return false;">
      <select id="genderInput" name="genderSelect">
       <option value="Male">Male</option>
       <option value="Female">Female</option>
      </select>
      <input type="submit" onclick="gender()">
    </form>
    
    <h3>
      Age
    </h3>
    <form id="ageApp" onsubmit="return false;">
      <select id="ageInput" name="ageSelect">
       <option value="u35">Under 35</option>
       <option value="36-45">36-45</option>
        <option value="46-55">46-55</option>
        <option value="56-65">56-65</option>
        <option value="o65">Over 65</option>
      </select>
      <input type="submit" onclick="age()">
    </form>
    
    <button onclick="summary()">
      Summary
    </button>
    
    
    
    
    

    <!-- include the Glitch button to show what the webpage is about and
          to make it easier for folks to view source and remix -->
    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
    <script src="https://button.glitch.me/button.js"></script>
  </body>
</html>

答案 3 :(得分：0)

  

我只是纠正了错误而未改进代码。

     

==应该用于比较值，而=则用于赋值

     

如果要全局访问变量，则变量应为全局变量   获取那些在函数本身中初始化的变量。

/* If you're feeling fancy you can add interactivity 
    to your site with Javascript */

// prints "hi" in the browser's dev tools console
console.log('hi');





function gender() {
  var userGender = document.getElementById("genderInput").value;
  console.log('Gender selected as ' + userGender);
}


function age() {
  var userAge = document.getElementById("ageInput").value;
  console.log('Age selected as ' + userAge);
}


function summary() {
var userGender = document.getElementById("genderInput").value;
 var userAge = document.getElementById("ageInput").value;
  if (userGender == 'Male') {
  
    if (userAge == 'u35') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
    
    else if (userAge == '36-45') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
    
    else if (userAge == '46-55') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
    
    else if (userAge == '56-65') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
    
    else if (userAge == 'o65') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
  
  } else if (userGender == 'Female') {
  
    if (userAge == 'u35') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
    
    else if (userAge == '36-45') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
    
    else if (userAge == '46-55') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
    
    else if (userAge == '56-65') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
    
    else if (userAge == 'o65') {
    
      console.log('The user is ' + userGender + 'and ' + userAge + ' years old');
    
    }
    
  } else {
  
    console.log('nothing selected');
    
  }
  
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
    
    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head>  
  <body>
    <h1>Hi there!</h1>
    
    
    <h3>
      Gender
    </h3>
    <form id="genderApp" onsubmit="return false;">
      <select id="genderInput" name="genderSelect">
       <option value="Male">Male</option>
       <option value="Female">Female</option>
      </select>
      <input type="submit" onclick="gender()">
    </form>
    
    <h3>
      Age
    </h3>
    <form id="ageApp" onsubmit="return false;">
      <select id="ageInput" name="ageSelect">
       <option value="u35">Under 35</option>
       <option value="36-45">36-45</option>
        <option value="46-55">46-55</option>
        <option value="56-65">56-65</option>
        <option value="o65">Over 65</option>
      </select>
      <input type="submit" onclick="age()">
    </form>
    
    <button onclick="summary()">
      Summary
    </button>
    
    
    
    
    

    <!-- include the Glitch button to show what the webpage is about and
          to make it easier for folks to view source and remix -->
    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
    <script src="https://button.glitch.me/button.js"></script>
  </body>
</html>

答案 4 :(得分：0)

其他答案已告诉您您的错误。

这是我的版本，旨在教育更好的做法

  • 使用轻松的事件监听器
  • 使用对象将适当的文本与值匹配

var ages = {
  u35: "under 35",
  "36-45": "between 36 and 35",
  "46-55": "between 46 and 55",
  "56-65": "between 56 and 65",
  "o65": "over 65"
}



window.addEventListener("load", function() {
  document.getElementById("genderInput").addEventListener("change", function() {
    var userGender = this.value;
    console.log('Gender selected as ' + userGender);
  });

  document.getElementById("ageInput").addEventListener("change", function() {
    var userAge = this.value;
    console.log('Age selected as ' + userAge);
  });
  document.getElementById("summary").addEventListener("click", function() {
    var userGender = document.getElementById("genderInput").value;
    var userAge = document.getElementById("ageInput").value;
    if (!userGender && !userAge) {
      console.log('nothing selected');
      return;
    }
    var text = [];
    if (userGender) text.push(userGender);
    if (userAge) text.push(ages[userAge] + ' years old');
    console.log('The user is ' + text.join(" and "));
  })
});
<h1>Hi there!</h1>

<form>

  <h3>Gender</h3>
  <select id="genderInput" name="genderSelect">
    <option value="">Please select</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    <option value="Other">Other</option>
  </select>

  <h3>Age</h3>
  <select id="ageInput" name="ageSelect">
    <option value="">Please select</option>
    <option value="u35">Under 35</option>
    <option value="36-45">36-45</option>
    <option value="46-55">46-55</option>
    <option value="56-65">56-65</option>
    <option value="o65">Over 65</option>
  </select>
  <button id="summary" type="button">Summary</button>
</form>

答案 5 :(得分：0)

使用es6模板字符串，我们可以根据传递给handleUser方法的条件来构建智能控制台日志

const handleUser = filter => {
  const age = filter === 'gender' ? null : document.querySelector('#ageInput').value
  const gender = filter === 'age' ? null : document.querySelector('#genderInput').value
  if (!gender && !age) return alert('please complete the form')

  // build log frorm age and gender data
  console.log(`User is ${!!gender ? gender : ''}${!!gender && !!age ? ' and ' : ''}${!!age ? `aged ${age}` : ''}`)
  
  // Use switch to handle your age ranges (more readable imho than if-else etc)
  // assumig eventually you are going to want to add more logic based on age...
  switch (age) {
    case 'u35':
      break;
    case '36-45':
      break;
    case '46-55':
      break;
    case '56-65':
      break;
    case 'o65':
      break;
    default:
      
      break;
  }
}
<h1>Hi there!</h1>
    <h3>
      Gender
    </h3>
    <form id="genderApp" onsubmit="return false;">
      <select id="genderInput" name="genderSelect">
       <option></option>
       <option value="Male">Male</option>
       <option value="Female">Female</option>
      </select>
      <input type="submit" onclick="handleUser('gender')">
    </form>
    
    <h3>
      Age
    </h3>
    <form id="ageApp" onsubmit="return false;">
      <select id="ageInput" name="ageSelect">
       <option></option>
       <option value="u35">Under 35</option>
       <option value="36-45">36-45</option>
        <option value="46-55">46-55</option>
        <option value="56-65">56-65</option>
        <option value="o65">Over 65</option>
      </select>
      <input type="submit" onclick="handleUser('age')">
    </form>
    
    <button onclick="handleUser()">
      Summary
    </button>
</br>
</br>
</br>
</br>
</br>
</br>

相关问题
最新问题