Changing light in three.js

<html>
    <head>
        <title> Light </title>
        <style> canvas { width:100%; height:100%; background-color:black;} </style>
    </head>
    <body>
        <h1 align= "center" style="color:red"> Light </h1>
        <script src="./mrdoob-three.js-58e4622/build/three.min.js"></script>
        <script>
            // Creazione scena, camera e renderer:
            var scene= new THREE.Scene();
            var camera= new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
            var renderer= new THREE.WebGLRenderer();
            renderer.domElement.addEventListener("mousedown",function(e){
                scene.remove(light);
                light= new THREE.DirectionalLight(0xffffff,0.5);
                light.position.set(0,0,20);
                scene.add(light);
            },false);
            renderer.setSize(window.innerWidth,window.innerHeight);
            document.body.appendChild(renderer.domElement);
            camera.position.z=5;

            // Creazione geometria, materiale e cubo:
            var geometry= new THREE.CubeGeometry(2,2,2);
            var material= new THREE.MeshPhongMaterial({
                color:0x00abb1,
                ambient:0x00abb1,
                emissive:0x006063,
                specular:0xa9fcff,
                shininess:100
            });
            var cube= new THREE.Mesh(geometry,material);
            scene.add(cube);

            var light= new THREE.SpotLight(0xffffff);
            light.position.set(0,0,20);
            scene.add(light);

            // Creazione della  funzione di rendering:
            var render= function() {
                requestAnimationFrame(render);
                cube.rotation.x+= 0.05;
                cube.rotation.y+= 0.05;
                renderer.render(scene,camera);
            }
            render();
        </script>
    </body>
</html>