Функция Box-Shadow на изображении не работает

Не могу понять это, почему функция onclick на изображении не отбрасывает тень каждый раз, когда вы щелкаете? Не могли бы вы помочь, я программист-самоучка, был бы признателен. (Посмотрите мой файл Javascript).

Конечный результат должен быть похож на этот https://jenniferdewalt.com/more_drop_shadow.html, но она написала его в jQuery, и я еще не знаю эту структуру

КОД

    
    var newBlur = 0;
    var newSpread = 0;

document.getElementById("catIMG").addEventListener("click", shadowIMG);

function shadowIMG() {
    var myShadow = genShadow();
    document.getElementById("catIMG").style.boxShadow = myShadow;
    console.info(myShadow);
}

function genShadow() {
    var arr = [0, 0, newBlur, newSpread,];
    newBlur +=1;
    newSpread +=5;
    var newShadow = '"' + arr[0] + 'px ' + arr[1] + 'px ' + arr[2] + 'px ' + arr[3] + 'px ' + 'Black' + '"' ;
    return newShadow;
}

body
{
    margin: 0;
    background-color: lightgrey;
}

input {
    position: absolute;
    left: 10%;
    width: 100px;
    height: 50px;
    font-size: 20px;
    color: white;
    background-color: green;
}

#blueTop {
    font-size: 30px;
    font-family: Arial;
    width: 100%;
    height: 100px;
    background-color: mediumpurple;
}


#catIMG {
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translate(-50%);
    width: 750px;
    height: 500px;
    cursor: pointer;

}

#catText {
    position: absolute;
    left: 50%;
    top: 800px;
    transform: translate(-50%);
    width: 750px;
    text-align: center;
    font-size: 50px;
    font-weight: 100;
    color: rgb(50,20,0);
    cursor: pointer;
}

h5 {
    position: absolute;
    left: 50%;
    top: 1000px;
    transform: translate(-50%);
    font-size: 25px;
    cursor: pointer;
}

<form>
<input id = "testButton"type = "button" value = "Test"/>
</form>
<div id = "blueTop"></div>
<img id = "catIMG" src = "./more_grumpy_shadow.png"/>
<h1 id = "catText">"You will always be lucky if you know how to make friends with strange cats."</h1>
<h5>- Colonial proverb</h5>

javascript html css onclick shadow

18.05.2018 14:49

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Проблема в этой строке:

var newShadow = '"' + arr[0] + 'px ' + arr[1] + 'px ' + arr[2] + 'px ' + arr[3] + 'px ' + 'Black' + '"' ;

Вы добавляете дополнительные цитаты.

// JavaScript source code

var newBlur = 2;
var newSpread = 2;



//functions
document.getElementById("catIMG").addEventListener("click", shadowIMG);

function shadowIMG() {
    var myShadow = genShadow();
    document.getElementById("catIMG").style.boxShadow = myShadow;
    debugger;
    console.info(myShadow);
}

function genShadow() {
    var arr = [10, 10, 10, 10,];
    newBlur +=1;
    newSpread +=5;
    var newShadow = '' + arr[0] + 'px ' + arr[1] + 'px ' + arr[2] + 'px ' + arr[3] + 'px ' + ' black' + '' ;
    console.info(newShadow);
    return newShadow;
}

body
{
    margin: 0;
    background-color: lightgrey;
}

input {
    position: absolute;
    left: 10%;
    width: 100px;
    height: 50px;
    font-size: 20px;
    color: white;
    background-color: green;
}

#blueTop {
    font-size: 30px;
    font-family: Arial;
    width: 100%;
    height: 100px;
    background-color: mediumpurple;
}


#catIMG {
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translate(-50%);
    width: 750px;
    height: 500px;
    cursor: pointer;

}

#catText {
    position: absolute;
    left: 50%;
    top: 800px;
    transform: translate(-50%);
    width: 750px;
    text-align: center;
    font-size: 50px;
    font-weight: 100;
    color: rgb(50,20,0);
    cursor: pointer;
}

h5 {
    position: absolute;
    left: 50%;
    top: 1000px;
    transform: translate(-50%);
    font-size: 25px;
    cursor: pointer;
}

<html lang = "en" xmlns = "http://www.w3.org/1999/xhtml">
    <head>
        <meta charset = "utf-8" />
        <title></title>
    </head>
    <body>
        <form>
            <input id = "testButton"type = "button" value = "Test"/>
        </form>
        <div id = "blueTop"></div>
            <img id = "catIMG" src = ""/>
            <h1 id = "catText">"You will always be lucky if you know how to make friends with strange cats."</h1>
            <h5>- Colonial proverb</h5>

    </body>
    </html>

Большое спасибо, я не могу поверить, что что-то настолько простое может решить проблему :), я бы никогда не нашел этого сам.

— 18.05.2018 15:30

18.05.2018 15:04

нет необходимости в дополнительной работе, которую вы делаете. Сделайте это простым, используя свойство стиля javascript, увеличивайте blur-radius и spread-radius всякий раз, когда пользователь нажимает кнопку.

var i = 0;
var j = 3;
document.getElementById("makeshadow").addEventListener("click", function() {
    i++;
    j = i * 3;
   document.getElementById("catIMG").style.boxShadow  = 
   "rgba(0, 1, 0, 0.35) 0px 0px "+i+"px "+j+"px";
});

body
{
    margin: 0;
   padding:20px;
}

 <html lang = "en" xmlns = "http://www.w3.org/1999/xhtml">
    <head>
        <link href = "./dropShadow.css" type = "text/css" rel = "stylesheet"/>
        <meta charset = "utf-8" />
        <title></title>
    </head>
    <body>
        
           
  

            <img id = "catIMG" src = "http://via.placeholder.com/350x150"/>
      
<button id = "makeshadow">Button</button>

    </body>
    </html>

Пожалуйста, помимо кода, объясните, что вы сделали и почему это решило проблему.

— 18.05.2018 15:07

@Master Arrodox Я думаю, что этот ответ следует принять, поскольку он дает самое простое и правильное решение вашего вопроса

— 19.05.2018 08:42

18.05.2018 15:06

Удаление кавычек у переменной newShadow решило проблему, спасибо всем, кто мне помог.

18.05.2018 15:18