I have been puzzling for several hours, I can not understand why my code is not working correctly. In general, my goal is that when you click on the main page, the text inside the <h1> tag changes

Example

Earlier, I did it in a simple way as shown below, and of course I registered each class of the .ottogi .sojo .natura well, and so on. You can refer to the following link http://test1.testkz.ru/

 var text = $('.inner-container h1').text(); var changeString = $('.inner-container h1'); $('.ottogi').click(function() { if (text == 'Ottogi') { $(changeString).text('Ottogi'); } }); $('.sajo').click(function() { if (text == 'Ottogi') { $(changeString).text('Sajo Hapyo'); } });

Then, in order not to repeat this procedure 6 times, I decided to create an object, and run through it with a for ... in loop to implement this procedure. Maybe my if does not work correctly. Guys look and help please

 const selectorToResponse = { '.ottogi': 'Ottogi', '.sajo': 'Sajo Hapyo', '.natura': 'Natura Bogata', '.maloo': 'TOO Maлy', '.dongush': 'Dongsuh', '.may': 'OOO Maй' } // Prefixing with $ to denote that is an element, not text etc const $header = $('.inner-container h1') for (const selector in selectorToResponse) { $(selector).click = function () { // using $header.text() inside function so that is current header text // `text` never changed in your example if ($header.text() === 'Ottogi') { // using === instead of == const response = selectorToResponse[selector] $header.text(response) } } }

Here is the HTML

  <div class="left-main col-lg-3 col-md-3 col-sm-12 col-xs-12"> <div class="shadow-effect"><p class="ottogi">OTTOGI</p></div> <div class="shadow-effect"><p class="sajo">Sajo Hapyo</p></div> <div class="shadow-effect"><p class="natura">Natura Bogata</p></div> <div class="shadow-effect"><p class="maloo">ТОО Малу</p></div> <div class="shadow-effect"><p class="dongush">Dongsuh</p></div> <div class="shadow-effect"><p class="may">ООО Май</p></div> </div> <div class="right-main col-lg-9 col-md-9 col-sm-12 col-xs-12"> <div class="inner-container"> <h1>Ottogi</h1> <h2>Южно - Корейские продукты питания высочайшего качества!</h2> </div>
  • And what exactly does not work for you? I switch everything. What browser are you checking in? Well, except for Safari, I went to Safari and my faithfulness ... - Alexander Bragin
  • @AlexanderBragin works for you because the old script that is shown above is used on the site, now I will disable it and can see it - NK Montreal
  • I'll see now. - Alexander Bragin
  • I apologize for the long answer. I had to set the traffic interception tool so that you can watch the result of the changes directly on your website. Wrote in response. This is about changing the headers. Look: this option will suit? I did not quite understand why you declared the object - was something further supposed to do? - Alexander Bragin

2 answers 2

Instead

 const selectorToResponse = { '.ottogi': 'Ottogi', '.sajo': 'Sajo Hapyo', '.natura': 'Natura Bogata', '.maloo': 'TOO Maлy', '.dongush': 'Dongsuh', '.may': 'OOO Maй' } // Prefixing with $ to denote that is an element, not text etc const $header = $('.inner-container h1') for (const selector in selectorToResponse) { $(selector).click = function () { // using $header.text() inside function so that is current header text // `text` never changed in your example if ($header.text() === 'Ottogi') { // using === instead of == const response = selectorToResponse[selector] $header.text(response) } } }

Cut the code as follows

Get the value from the menu text and display it in the header.

 $(function () { var header = $('.inner-container h1'); $('.shadow-effect p').click(function () { header.text($(this).text()); }); });
  • Thank you very much!!! Such a simple solution! ) - NK Montreal
  • @ nk-montreal please! There will be more questions - ask. - Alexander Bragin

 //может вообще можно без объекта обойтись? зачем сущности плодить без надобности? selectorToResponse.forEach(function (i){ addEventListener("click", function(){ if ($header.text() === 'Ottogi') { // using === instead of == const response = selectorToResponse[selector] $header.text(response) } }); });

And why do you selector as a constant declare? yes even inside the loop?

  • such as the value of the constants cannot be changed by the new assignment, and cannot be redefined. I want to use the good tone rule so to speak. Here is a more detailed description of why developer.mozilla.org/en/docs/Web/JavaScript/… - NK Montreal
  • but in the loop, assignment occurs with each iteration. You won’t be fooled by the script))) He understands it like this, a constant - you don’t need to change it and take an array and try to change ... a constant ... (or don’t I understand something?) Try to do without constants - Ostap Strashevsky