Hello! Problem, I want a menu to open by clicking on the picture, I made the menu myself, I just need to change the position of the menu by clicking on the picture.
Hi @Javer - can you share more details like a screenshot or what your current markup/code looks like?
Cheers,
Kirupa 
I have already removed the script because it did not work, I did it as in the book on chapter 30
<a href="#" class="logo" id="setting"><img src="/Users/daniil/Documents/qwins/png/imgonline-com-ua-Resize-xxZoL2fDi8Sp.png"></a>
<script>
let setting-menu = document.querySelecor("#setting");
setting-menu.addEvenListener("click",menu_open, false);
function menu_open(e){
document.logo.style.border = "20px solid darkred";
}
</script>
here is the code. relying on a book
When you check in the console, what error are you seeing? Here is a guide on how to work with the console: Console Logging Basics
Now, one thing that seems off is the spelling of your properties:
- querySelecor should be querySelector
- addEvenListener should be addEventListener
Once you make these spelling updates, see if your code works. If it still doesn’t work, check the Console (using the guide from the earlier link if you aren’t sure how to do that) and let me know what errors you see.
Cheers,
Kirupa
writes no errors, but the code still does not work exactly
@kirupa
Did you fix the spelling of the misspelled properties? Can you paste a screenshot of what it is that you currently are seeing in your browser when you try to run this app?
throw something else? @kirupa
When I ran the snippet you posted, the Console showed me another error:
It turns out you can’t name a variable as setting-menu where you have the - character. Also, this line “document.logo.style.border” doesn’t work either. What does document.logo refer to here?
Here is a working example where clicking on the image gives it a border: https://codepen.io/kirupa/pen/rNJrpYj
Take a moment and see where the book’s instructions and what you have differ. JavaScript isn’t very forgiving of misspellings and syntax errors. You have to ensure your code is exactly as specified.
Hopefully this helps 
helped, thanks.
And how to make it so that when you click in an empty area, this frame disappears in the picture? @kirupa
You can listen for a click event on the body element and essentially undo the inline style you are setting on the image.
Two tutorials that can help you out:
Good afternoon, the problem is not solved. I don’t understand how to make it so that when you click on the picture, the property of another class changes, that is, I made a menu and indicated an indent from the right -100%, it is necessary that when you click on the picture this indent disappears (that is, it was 0%), I think I clearly explained . Sorry for such stupid questions
This tutorial sounds like it can help you out: Creating a Smooth Sliding Menu | KIRUPA
What it highlights and what you describe trying to do are very similar
Thanks, I already figured it out myself, but thanks for the answer)
1 Like
Hi again!
I had such a problem, I created a border-radius and put a few lines of text into it, but I can’t put the picture there (I’m doing a project with a partner, he said the position is absolute and you can’t use others)
Can you please help? I will attach the code below
type or paste code here
<main>
<div class="Kurs">
<img src="/Users/daniil/Downloads/9945b037-c6dd-4b68-8091-ce5614962c0d 1.png" alt="геи" class="ImgKurs">
<div class="NameKurs"> Название курса </div>
<div class="shortOpisanie"> Краткое описание курса <div>
</div>
</main>
type or paste code here
.main {
display: flex;
flex-direction: row;
gap: 30px;
height: 248px;
width: 800px;
background: #DFE6FF;
}
.NameKurs {
padding-left: 635px;
margin-top: 209px;
height: 248px;
width: 970px;
margin-left: 235px;
font-family: ‘Raleway’;
font-style: normal;
font-weight: 800;
font-size: 18px;
line-height: 100%;
padding-top: 12px;
padding-left: 400px;
padding-bottom: 218px;
box-shadow: 4px 4px 5px 3px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
.shortOpisanie {
margin-left: 635px;
}
If I understand correctly, you have an absolutely positioned image. Its parent is not absolutely positioned, so you need a way to have the parent’s border radius apply to the image. Right?
