代码之家 › 专栏 › 技术社区 › Nicola Romani

找不到重构警报的方法(练习)

refactoring scope javascript

Nicola Romani · 技术社区 · 6 年前

我是一个JS noob想说“你好先生/小姐” 您的姓名 哦!“干净。我看不到在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>

谢谢你的建议。

5 回复 | 直到 6 年前

gurvinder372 6 年前

您可以使用 三元运算符

alert('Hello ' + ( a === "M" ? "Mr." : "Miss" ) + " " + x + "!");

i、 e。

   function helloYou() {
        let x = document.getElementById("1").value; 
        let a = document.getElementById('3').value;
        alert('Hello ' + ( a === "M" ? "Mr." : "Miss" ) + " " + x + "!");
    }

user9420984 user9420984 6 年前

假设您只需要 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>

Joe Warner 5 年前

function helloYou() {
    const val = id => document.getElementById(id).value; 
    alert(`Hello ${val(3) === "M" ? "Mr." : "Miss"} ${val(1)} !`);
}

我们可以利用两件事来缩短if逻辑。

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

Ron Nabuurs 6 年前

像这样的?

<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>

Glutch 6 年前

只是将此作为选项添加,非常干净:)

const helloYou = () => {
  let name = document.getElementById('1').value
  let gender = document.getElementById('3').value
  const prefix = gender === 'M' ? 'Mr.' : 'Miss'
  alert(`Hello ${prefix} ${name}!`)
}