接受用户输入来创建一个独特的对象

Question

过去几周我一直在学习 java脚本，直到现在我一直在使用过程编程来创建我的文档。我目前正在学习面向对象的编程，虽然我知道一些 java，但已经有一段时间了，我在处理这些挑剔的对象时遇到了麻烦。我想为一张牌的面值和花色获取用户输入，并使用该数据从构造函数实例化一个对象。我知道有更简单的方法可以做到这一点，但这会破坏我正在尝试学习的课程的目的。这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Card Constructor</title>
    <h1 style="text-align:center">Create a playing card!</h1>
    <script>
        function Card(){
           this.face=" ";
           this.suit=" ";
           this.info="You made a "+face+" of "+suit"!";
           this.showInfo=function(){
               alert(this.info);
           }
           this.setFace=function(newFace){
               this.face=newFace;  
           }
           this.setSuit=function(newSuit){
               this.suit=newSuit;
           }
        }
        function userCard(){
            var goodCard=new Card();
            goodCard.setFace=document.getElementById('faceInput').value=this.face; 
            goodCard.setSuit= document.getElementById('suitInput').value=this.suit;
            goodCard.showInfo();
            document.getElementById('faceInput').value=" ";
            document.getElementById('suitInput').value=" ";
        }
    </script>
</head>
<body style="text-align: center">
    <p>Please enter a face</p>
    <input type="text" id="faceInput" name="face" value=" "/>
    <p>And now a suit</p>
    <input type="text" id="suitInput" name="suit" value=" "/></br>
    </br><input type="button" value="Go!" onClick="userCard()"/>
</body>

现在，问题是我的按钮不起作用。如果将我的 onClcik 更改为 onClick=alert('you clicked') 我会收到回复。所以我知道我一定是在脚本中搞砸了。任何人都可以帮助新手吗？

Answer 1

替换您的java脚本代码：

更新：

1.There 是你的代码优化了。

你的this.face和this.suit是public变量，所以有this.setFace和`this.setSuit'不需要的方法。

你只需写 goodCard.face = ... 和 goodCard.suit = ... 而不是寻址到方法

function Card(faceVal, suitVal) {
    this.face = faceVal;
    this.suit = suitVal;
    this.info = "";
    this.showInfo = function () {
        this.info = "You made a " + this.face + " of " + this.suit + "!";
        alert(this.info);
    }
}
function userCard() {
    var goodCard = new Card(document.getElementById('faceInput').value, document.getElementById('suitInput').value);
    goodCard.showInfo();
    document.getElementById('faceInput').value = "";
    document.getElementById('suitInput').value = "";
}

2.Also，我建议用其他方式来声明 Card 函数。

有私有变量，getter/setter（另外，您只能使用 setter 或 getter）以及其他 public 方法（如 java class）。

function Card(faceVal, suitVal) {
    //private variables
    var _face = faceVal || "",
        _suit = suitVal || "",
        _info = "";

    Object.defineProperties(this, {
        //region <Getter & Setter>
        face: {
            get: function () {
                return _face;
            },
            set: function (val) {
                _face = val;
            },
            enumerable: true
        },
        suit: {
            get: function () {
                return _suit;
            },
            set: function (val) {
                _suit = val;
            },
            enumerable: true
        },
        info: {
            get: function () {
                return _info;
            },
            set: function (val) {
                _info = val;
            },
            enumerable: true
        }
    });

    //other public methods
    this.showInfo = function () {
        _info = "You made a " + _face + " of " + _suit + "!";
        alert(_info);//or alert(this.info)
    }
}

var goodCard = new Card();//you can define object outside without params

function userCard() {
    goodCard.face = document.getElementById('faceInput').value;
    goodCard.suit = document.getElementById('suitInput').value;
    goodCard.showInfo();
    document.getElementById('faceInput').value = "";
    document.getElementById('suitInput').value = "";
}

Answer 2

如果有人对我最终如何实现它感到好奇，或者如果您的教科书中有一个作业要求使用 set 方法创建对象而您遇到困难，这就是我最终的做法。注意：我有两个设置方法可以修改我的一个信息方法。

<html>
<head>
    <title>Card Constructor</title>
    <h1 style="text-align:center">Create a playing card!</h1>
    <script>
        function Card(face, suit){
            this.face="";
            this.suit="";
            this.info=face+" "+suit;
            this.setFace=function(newFace){
                this.face=newFace;  
            }
            this.setSuit=function(newSuit){
                this.suit=newSuit;
            }
            this.showInfo=function(){
                this.info="You made a "+this.face+" of "+this.suit+"!";
                alert(this.info);
        }
        }
        function userCard(){
            var goodCard=new Card();
            goodCard.setFace(document.getElementById('faceInput').value);
            goodCard.setSuit(document.getElementById('suitInput').value);
            goodCard.showInfo();
            document.getElementById('faceInput').value="";
            document.getElementById('suitInput').value="";
        }
    </script>
</head>
<body style="text-align: center">
    <p>Please enter a face</p>
    <input type="text" id="faceInput" name="face" value=""/>
    <p>And now a suit</p>
    <input type="text" id="suitInput" name="suit" value=""/></br>
    </br><input type="button" value="Go!" onClick="userCard()"/>
</body>
</html>

接受用户输入来创建一个独特的对象

Taking user input to create a unique object

javascript

object

onclick

instance