Question

过去几周我一直在学习javascript，直到现在我一直在利用程序编程来创建我的文档。我目前正在学习面向对象的编程，虽然我知道一些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（＆＃39;您点击了＆＃39;）我会收到回复。所以我知道我必须在我的剧本中搞砸了一些东西。任何人都可以帮助一个菜鸟吗？

Answer 1

替换您的javascript代码：

更新：

1.您的代码已经过优化。

您的this.face和this.suit是公共变量，因此有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.另外，我建议用其他方式声明Card函数。

有私有变量，getter / setter（也可以只使用setter或getter）以及其他公共方法（如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 = "";
}

获取用户输入以创建唯一对象

1 个答案: