Good day!
I recently started to learn the basics of programming, so do not judge strictly if there are not very competent questions. The essence of the problem is such, I am doing the simplest REST web service, all the action takes place in an empty div tag with id = 'app'. In order not to take away your time to read the extra code, I will give below only the fragment of JS code that, in my opinion, concerns the essence of the question and briefly describes what should happen in it. Variable declaration
var div = function(element){ return document.getElementById(element); }, cl = function(element){ return document.getElementsByClassName(element); }, tokenApp = "", idGoods = "", target = {}, form = document.forms.login; After the page is loaded, a GET request is made as a result of which we receive a response in the response variable (I skip the request code). Based on the response received, I create separate tabs dynamically in the div element with id = 'app' (the getGoods function call occurs in a GET request)
function getGoods(response,i){ var goods = document.createElement('div'); div('app').appendChild(goods); goods.classList = 'box clearfix'; goods.setAttribute('data-id',response[i].id); goods.innerHTML = "<div class='wrap clearfix'><div class='side img'> <img src='http://smktesting.herokuapp.com/api/products/" + response[i].img + "'/></div><div class='side text'><div>" + response[i].title + "</div><div>Product Description: " + response[i].text + "</div></div></div>"; } Further, when clicking on any of the tabs, the registration form is called up, it is validated (I also skip the code for this part)
div('app').addEventListener('click', function (e) { target = e.target; while(target!==this){ if(target.hasAttribute('data-id')){ idGoods = target.getAttribute('data-id'); if(tokenApp == ""){ cl('screen')[0].style.display = 'block'; div('login').style.display = 'block'; } return; } target = target.parentNode; } }) After confirming successful validation of the form, registration, receipt of a token and its transmission in a new request to the server, I increased the size of the block that I initially clicked, added several more fields to it, including the close field, which, when clicked, should return dimensions The main unit is in original condition.
function showGoods(){ addClass(target, 'box-rev'); removeClass(target.children[0], 'wrap'); addClass(target.children[0], 'wrap-rev'); var review = document.createElement('div'); target.appendChild(review); review.classList = 'wrap-rev'; for(var i=0; i<target.children[0].children.length; i++){ removeClass(target.children[0].children[i], 'side'); addClass(target.children[0].children[i], 'side-rev'); } review.innerHTML = "<div class='close'>[X]</div><form><div id='rate'> </div><textarea></textarea><input type='submit' value='Submit'/> </form><div></div>"; target.addEventListener('click', function(e){ if(e.target == cl('close')[0]) delateRev(); }) } function delateRev(){ for(var i=0; i<target.children[0].children.length; i++){ removeClass(target.children[0].children[i], 'side-rev'); addClass(target.children[0].children[i], 'side'); } target.removeChild(target.children[1]); removeClass(target.children[0], 'wrap-rev'); addClass(target.children[0], 'wrap'); removeClass(target, 'box-rev'); } Those. when you click on close, the main unit should take the original form. But when you click on close, the following error 'TypeError: target is null in the line if (target.hasAttribute (' data-id ')) {' is the third line in the function where the listener is installed (this function code is above) . To eliminate errors with a closure, I store the label on the "clicked" block in the global target variable, then I can see it from any function. When I click on close, I do not delete this target. I do not understand why such a mistake and how to fix it. If my code here is presented in an inconvenient form, tell me how to fix it - I'll do it. I would be grateful for your help.
