簡體   English   中英

找不到重構警報的方法(練習)

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM