提问者:小点点

如何使用onclick选择图像和使用ondblclick删除图像?


给定10幅数字为0-9的图像,我想用onclick选择5幅图像,用ondblclick删除我喜欢/不喜欢的部分,然后按一定的顺序选择剩下的另外3幅图像,然后选择1幅并完成


共1个答案

匿名用户

这是我的代码,但不起作用。 这其实是一个简单的魔术,可以预测人们会选择什么:

    var input = {
        inputGuess: function(prediction) {
            var input = document.getElementById("inputGuess").value; //this is input text form. the answer from order will be inputted here
            var split = input/split(" ").map(x=>+x);
            if (split.indexOf(prediction) >= 0) {
                return true;
            }
            return false;
        },
        prediction: function() {
            var prediction= Math.floor(Math.random() * 10);
            return prediction;
        } 
    }        
    var view = {
        showPrediction: function() {
            var image = document.getElementById("prediction");
            image.src = "number 0"+input.prediction()+".png"; //prediction is actuali and image with number 
        },
        redoToChoose: function() {
            var images = document.getElementsByTagName("img");
            var imageId;
            for (var i = 0; i < images.length; i++) {
                imageId = document.getElementById("0"+i);
                if (imageId.src !== "taken.png") {
                    imageId.src = "number 0" + i + ".png"; //my images name is number 00, 01, and so on
                }
            }
        }
           
    };
    var controller = {
        card: 10,
        selected: 0,
        stop : false,
        choose: function(eventObj) {
            this.selected++;
            var image = eventObj.target;
            var name = image.id;
            name = "choose " + name + ".png"; //my image after i choose is choose 00, 01, and so on
            image.src = name;
        },
        removeImage: function(eventObj) {
            this.card--;
            var image = eventObj.target;
            image.src = "taken.png";
        },
        processInput : function() {
            var order= document.getElementById("order");
            var content= order.innerHTML;
//part what i asked. i want to iterate the order to choose image
            while(this.stop === false) {
                if (this.selected >= 5) {
                    if (input.inputGuess(input.prediction())) {
                        if (controller.card === 5) {
                            content = "click 2x to choose 5 number you desire";
                        } else if (this.car=== 3) {
                            content = "click 2x to choose 3 number you desire";
                        } else if (controller.card=== 2) {
                            content = "click 2x to choose 1 number you desire";
                            this.stop === true;
                        } 
                    } else {
                        if (this.card=== 5) {
                            content = "click 2x to choose 5 number you dont like";
                        } else if (this.card=== 3) {
                            content = "click 2x to choose 3 number you dont like";
                        } else if (this.card=== 2) {
                            content = "click 2x to choose 1 number you dont like";
                            this.stop === true;
                        } 
                    }
                }
                view.redoToChoose();
            }
    
    
        }
    }
    
    window.onload = init;
    function init() {
        var images = document.getElementsByTagName("img");
        for (var i = 0; i < images.length; i++) {
            images[i].onclick = controller.choose;
            images[i].ondblclick = controller.removeImage;
        } 
        controller.processInput();
    }