I have div when i click this div, after i call js function and want to blur whole page except one div.

edit

added full code

this is my full code (i use this template with backend Django) but i think it is not problem with Django and it is my issue with front-end ->

{% extends "base.html" %}
{% block content %}
{% include "./navbar.html" %}

<div >
    <div >
        <div >
            <div >
                <form>
                    {% if fav %}
                        <button type="submit" name="fav" >&#9733;</button>
                    {% else %}
                        <button type="submit" name="fav" >&#9734;</button>
                    {% endif %}
                </form>
                <h1>{{ detail.user }}</h1>
            </div>
            <div >
                {% for a in detail.category.all %}
                <p >#{{ a.name }}</p>
                {% endfor %}
            </div>
            <form  id="ld" action="{% url 'Profile:question-detail' pk=detail.id %}">
                <div >
                    {% if like_ex %}
                    <button type="submit" name="like" ></button>
                    {% else %}
                    <button type="submit" name="like" ></button>
                    {% endif %}

                    {% if dislike_ex %}
                    <button type="submit" name="dislike"
                            ></button>
                    {% else %}
                    <button type="submit" name="dislike" ></button>
                    {% endif %}

                    <div  onclick="t()">{{ detail.point }}</div>
                </div>
                <button type="button"  onclick="show()" >აქტივობა</button>
            </form>
            <h5 >{{ detail.title }}</h5>
            <p >{{ detail.text }}</p>

                    <div >
            <p   onclick="hide()" id="test">test</p>
        </div>
        </div>



        {% if can_update %}
            {% if owner %}
            <div >
                <a href="{% url 'Profile:update-question' object.id %}">
                    <button >
                            <span >
                                განახლება
                            </span>
                    </button>
                </a>
            </div>
            {% endif %}

        {% else %}
        <div >
             <button >
                    <span >
                        განახლების ლიმიტი ამოწურული გაქვს
                    </span>
             </button>
        </div>

        {% endif %}

    </div>


    <div >

        <form  method="post" id="comment" novalidate>
            {% csrf_token %}
            <div >
                {% for field in form %}
                {% if field.errors %}
                <div >
                    <ul >
                        {% for error in field.errors %}
                        <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}

                {% endfor %}
                <div >
                    {% for field in form %}
                    {{field}}
                    {% endfor %}
                </div>

                <div >
                    <div >
                        <a href="{ url Profile:question_detail detail.id }"><input type='submit' name="comment"
                                                                                   
                                                                                   value='დაკომენტარება'></a>
                    </div>
                </div>
        </form>
    </div>
</div>
<div >
    {% for a in detail.question.all %}
    <div >
        <div>
            <p > {{a.user}}</p>
        </div>
        <p >{{a.text}}</p>
    </div>

    {% endfor %}
</div>

<script>
function show() {
   document.getElementById('test').style.display = "block";
   document.querySelectorAll('body >*:not(.test)')
  .forEach(node => node.style.filter = "blur(2px)")

<!--  console.log(document.querySelector('body >*:not(.test)'))-->
}


function hide() {
   document.getElementById('test').style.display = "none";

}
</script>

{% endblock %}

what should I do? thank you all for helping

CodePudding user response：

There are multiple Issues with your example.

First of all: you are using document.getElementById('test') while writing a query that contains .test.
You either have to use an Id or a Classname, if this mix is intended, please provide a minimal code example to replicate the issue.

Secondly: using document.querySelector you only receive one Node. You might want to change it to

document.querySelectorAll('body >*:not(.test)').forEach(e => e.style.filter = "blur(2px)");

to change all Nodes that were selected in said query.

Third: If your test div is inside a Node that receives the blur, obviously it is blurred too. There is no circumvention other than only blurring only the siblings of said test element.

CodePudding user response：

Your approach has two issues:

1. You used querySelector - this only returns the first element that matches your selector. Change this to querySelectorAll, and you'll receive an array containing all of the elements. You can then loop over these, and apply the filter.
2. If you blur a parent element, all the children will also be blurred. Make sure the div you wish to exclude is a direct child of your body element.

The following should work:

document.querySelectorAll('body >*:not(.test)')
  .forEach(node => node.style.filter = "blur(2px)")