Mina Bolis Mina Bolis - 2 months ago 6
CSS Question

JavaScript - user selection function

Am new to JavaScript and am working on something and this is what I've reached so far and here is my code:

<!DOCTYPE html>
<html>
<head>
<title>Image Editor V 1.0</title>
<script>
function changeOpacity(newValue) {
document.getElementById("span").innerHTML = newValue*100 +'%';
document.getElementById("image1").style.opacity = newValue;
}

var color = true;

function imgColor() {
if (color) {
document.getElementById("image1").style.WebkitFilter = "grayscale(100%)";
color = false;
} else {
document.getElementById("image1").style.WebkitFilter = "none";
color = true;
}
}

function colorImg() {
document.getElementById("image1").style.WebkitFilter = "none";
}

function greyImg() {
document.getElementById("image1").style.WebkitFilter = "grayscale(100%)";
}

function userImage() {
var link = document.getElementById("userImg").value;
document.getElementById("image1").src = link;
}
</script>
</head>
<body>

<button onclick="colorImg()">Colored</button>
<button onclick="greyImg()">Greyscale</button>
<button onclick="imgColor()" >Alternate</button><br><br>

Opacity :<input type="range" min="0" max="1" value="1" step="0.2" onchange="changeOpacity(this.value)"/>
<span id="span">100%</span> <br><br>

Try your own image! <input id="userImg" type="text" placeholder="Enter url here">
<button onclick="userImage()">Go!</button>
<br><br>

<img class="myImages" id="image1" src="image4.jpg">
<img class="myImages" id="image2" src="image2.jpg">
<img class="myImages" id="image3" src="image3.jpg">

</body>
</html>


So far, the "Colored", "Greyscale", and "Alternate" buttons along with the opacity slider work as intended only on the first image (image1.jpg). Also, when the user inputs his own image, it replaces the first image and the functions work on it as intended. Here is what am trying to do:

1 - Let the user select which image of the 3 he wants to edit by clicking on it then apply a border around it and use it in the other functions( greyscale and opacity). Here is what I tried (but obviously didn't work):

<img class="myImages" id="image1" src="image4.jpg" onclick="selectImg(this.id)">
<img class="myImages" id="image2" src="image2.jpg" onclick="selectImg(this.id)">
<img class="myImages" id="image3" src="image3.jpg" onclick="selectImg(this.id)">

function selectImg(imgID) {
document.getElementById("imgID").style.border = 50px;
}


2 - When the user inputs his own image, I want it to replace all the 3 images I have displayed by default.

Your help is greatly appreciated. Thanks in advance!

Answer

You are missing quotes both on the id and the 50px. But it is better to define a style for the selection.

Then let a click handler first remove that style from all the images, except the clicked image, where it should set that style. The functions .classList.add and .classList.remove can be used for that.

Where you currently have document.getElementById('image1'), you would do instead:

document.querySelector('.selected')

Then you should also make sure that the page loads with one image selected, i.e. with the selected class.

Some other improvements make sure that when changing the selection, the opacity slider is also brought in line with that image's current opacity setting.

Here is a snippet that does all that:

function changeOpacity(newValue) {
    document.getElementById("span").textContent = newValue*100 +'%';
    document.querySelector(".selected").style.opacity = newValue;
    document.querySelector('input[type=range]').value = newValue;
}

function getOpacity() {
    return parseFloat(document.querySelector(".selected").style.opacity || '1');
}

function isColor() {
    return document.querySelector(".selected").style.WebkitFilter !== "grayscale(100%)";
}

function imgColor() {
    document.querySelector(".selected").style.filter =
    document.querySelector(".selected").style.WebkitFilter = 
         isColor() ? "grayscale(100%)" : "none";
}

function colorImg() {
    if (!isColor()) imgColor()
}

function greyImg() {
    if (isColor()) imgColor()
}

function userImage() {
    document.querySelector(".selected").src = document.getElementById("userImg").value;
}

// Add this function, and call it on click on an image
function select(img) {
    Array.from(document.querySelectorAll('.myImages')).forEach( 
        myImg => myImg === img ? myImg.classList.add('selected')
                               : myImg.classList.remove('selected')
    );
    // bring opacity slider in line with selected image
    changeOpacity(getOpacity());
}
.selected {
  border: 1px solid;
}
<button onclick="colorImg()">Colored</button>  
<button onclick="greyImg()">Greyscale</button>
<button onclick="imgColor()">Alternate</button><br><br>

Opacity :<input type="range" min="0" max="1" value="1" step="0.2" onchange="changeOpacity(this.value)"/> 
<span id="span">100%</span> <br><br>

Try your own image! <input id="userImg" type="text" placeholder="Enter url here">
<button onclick="userImage()">Go!</button>
<br><br>

<img class="myImages selected" id="image1" onclick="select(this)"
    src="//cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-icon.png?v=93426798a1d4">
<img class="myImages" id="image2" onclick="select(this)"
   src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"> 
<img class="myImages" id="image3" onclick="select(this)" 
   src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/sf/sf-icon.png?v=6c3100d858bb">

Comments