When I click I want an img tag to be generated and with an image I have tried several ways but it doesn’t work.
JavaScript
x
10
10
1
var oferr=document.getElementsByClassName("a")[0];
2
var new=document.getElementsByClassName("create")
3
4
oferr.addEventListener('click', function () {
5
let new_element=document.createElement('img');
6
let image=document.createAttribute('src','img/imagen_1');
7
8
new_element.appendChild(imagen);
9
new.appendChild(new_element);
10
})
JavaScript
1
18
18
1
<div class="ad">
2
<h1>10% discount</h1>
3
</div>
4
<header>
5
<div class="logo">
6
<h2 class="name">Environments</h2>
7
</div>
8
<nav>
9
<a href="" class="nav-link">Offers</a>
10
<a href="" class="nav-link">Products</a>
11
<a href="" class="nav-link">Login</a>
12
</nav>
13
</header>
14
15
<div id="create">
16
17
</div>
18
<script src="/js/main.js"></script>
Advertisement
Answer
Just set the image’s .src
property to the source URL.
create
is an ID, not a class, so use document.getElementById()
.
The anchors don’t have class="a"
, you should use document.getElementsByClassName("nav-link")
.
You need to use Event.preventDefault()
in the event listener to prevent following the links.
You can’t use new
as a variable name because it’s a reserved keyword.
JavaScript
1
10
10
1
var oferr=document.getElementsByClassName("nav-link")[0];
2
var create=document.getElementById("create")
3
4
oferr.addEventListener('click', function (e) {
5
e.preventDefault();
6
let new_element=document.createElement('img');
7
new_element.src = 'img/imagen_1';
8
9
create.appendChild(new_element);
10
})
JavaScript
1
18
18
1
<div class="ad">
2
<h1>10% discount</h1>
3
</div>
4
<header>
5
<div class="logo">
6
<h2 class="name">Environments</h2>
7
</div>
8
<nav>
9
<a href="" class="nav-link">Offers</a>
10
<a href="" class="nav-link">Products</a>
11
<a href="" class="nav-link">Login</a>
12
</nav>
13
</header>
14
15
<div id="create">
16
17
</div>
18
<script src="/js/main.js"></script>