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.
var oferr=document.getElementsByClassName("a")[0];
var new=document.getElementsByClassName("create")
oferr.addEventListener('click', function () {
let new_element=document.createElement('img');
let image=document.createAttribute('src','img/imagen_1');
new_element.appendChild(imagen);
new.appendChild(new_element);
})
<div >
<h1>10% discount</h1>
</div>
<header>
<div >
<h2 >Environments</h2>
</div>
<nav>
<a href="" >Offers</a>
<a href="" >Products</a>
<a href="" >Login</a>
</nav>
</header>
<div id="create">
</div>
<script src="/js/main.js"></script>
CodePudding user response:
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 , 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.
var oferr=document.getElementsByClassName("nav-link")[0];
var create=document.getElementById("create")
oferr.addEventListener('click', function (e) {
e.preventDefault();
let new_element=document.createElement('img');
new_element.src = 'img/imagen_1';
create.appendChild(new_element);
})
<div >
<h1>10% discount</h1>
</div>
<header>
<div >
<h2 >Environments</h2>
</div>
<nav>
<a href="" >Offers</a>
<a href="" >Products</a>
<a href="" >Login</a>
</nav>
</header>
<div id="create">
</div>
<script src="/js/main.js"></script>