+1 vote
by
Help me find a simple solution to this problem. I'm just learning html and js and I'm stumped.
Task:
Create a button that, when clicked, displays a picture of an object, the name of which you write in the input. Choose about 3-4 pictures.

3 Answers

0 votes
by
 
Best answer
<input type="text" id="myinput">
<input type="button" id="mybutton" value="Взять картинку">
let things = {
'ручка' : '
'карандаш': '
'ластик': '
}
document.getElementById('mybutton').addEventListener('click',()=>{
let val = document.getElementById('myinput').value.toLowerCase().trim();
if(val in things){
let img = document.createElement('img');
img.src = things[val];
document.body.appendChild(img);
} else {
alert('нэээт такой вещ, извини брааат');
}
});
0 votes
by
When you click on the intuplet, the picture opens, we have to make it so that when you click on it, the styles switch in the LCD, so that the element would be visible, and vice versa, you need to connect to the element using the tree house, and spell the event, about this logic
by
Alex Thank you, it means I've always done it wrong myself))) thank you, it's useful.
by
switch styles in zhs, so that the element would be visible, and vice versa,

Don't teach people bad things.
To programmatically hide-show something, I recommend using https://www.w3schools.com/tags/att_hidden.asp

<img hidden> картинка по-умолчанию скрыта

imgElement.hidden = false // Отобразить картинку
And don't suffer the bullshit of changing styles
by
By default, the css object should have visibility:hiden;
0 votes
by
You can compare predefined variables like "picture1, picture2" with the text in the intuition, when the text matches, pressing the button will display a picture that is under that number.
...