![](/img/trans.png)
[英]Can't find an explanation for koa.js workshop solution, exercise number one
[英]Can't find a way to refactor alert (exercise)
我是一個JS noob試圖讓這個“你好mr./miss yourname !” 清潔。 我沒有看到在if / else中重構警報的方法,因為那時我失去了var b的值。
JS:
<script>
"use strict";
window.onload = function () {
let form1 = document.getElementById('myForm');
form1.addEventListener('submit', helloYou);
function helloYou() {
let x = document.getElementById("1").value;
let a = document.getElementById('3').value;
if ( a === "M") {
let b = "Mr.";
alert('Hello ' + b + " " + x + "!");
}
else {
let b = "Miss";
alert('Hello ' + b + " " + x + "!");
}
}
}
</script>
HTML:
<body>
<form id="myForm">
Write your name:
<input type="text" name="yourname" id="1" placeholder="name">
<select name="gender" id="3">
<option value="M">Male</option>
<option value="F">Female</option>
<input type="submit" name="submission" id="2" value="TRY ME">
</form>
</body>
謝謝你的任何建議。
您可以使用三元運算符
alert('Hello ' + ( a === "M" ? "Mr." : "Miss" ) + " " + x + "!");
即
function helloYou() {
let x = document.getElementById("1").value;
let a = document.getElementById('3').value;
alert('Hello ' + ( a === "M" ? "Mr." : "Miss" ) + " " + x + "!");
}
假設您只需要為警報選擇gender
的值,您可以將值更改為Mr.
和Miss
然后只提醒/打印它們。
<script>
"use strict";
window.onload = function () {
let form1 = document.getElementById('myForm');
form1.addEventListener('submit', helloYou);
function helloYou() {
let x = document.getElementById("1").value;
let a = document.getElementById('3').value;
alert('Hello ' + a + " " + x + "!");
}
}
</script>
HTML
<body>
<form id="myForm">
Write your name:
<input type="text" name="yourname" id="1" placeholder="name">
<select name="gender" id="3">
<option value="Mr.">Male</option>
<option value="Miss">Female</option>
<input type="submit" name="submission" id="2" value="TRY ME">
</form>
</body>
function helloYou() {
const val = id => document.getElementById(id).value;
alert(`Hello ${val(3) === "M" ? "Mr." : "Miss"} ${val(1)} !`);
}
我們可以利用兩件事1 tenary來縮短你的邏輯。
condition ? result : otherResult
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
和模板文字,它允許你使用back tics將javascript添加到字符串`string $ {javascript}``
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
像這樣的東西?
<script>
"use strict";
window.onload = function () {
let form1 = document.getElementById('myForm');
form1.addEventListener('submit', helloYou);
function helloYou() {
let x = document.getElementById("1").value;
let a = document.getElementById('3').value;
let b = "Miss"
if ( a === "M") {
b = "Mr.";
}
alert('Hello ' + b + " " + x + "!");
}
}
</script>
只需添加此選項,相當干凈:)
const helloYou = () => {
let name = document.getElementById('1').value
let gender = document.getElementById('3').value
const prefix = gender === 'M' ? 'Mr.' : 'Miss'
alert(`Hello ${prefix} ${name}!`)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.