function calls itself multiple times in javascript when come back to same option in select dropdown

32 views Asked by At

this is for particular index i.e.(index == 2). first time when page loads then it will works normally(function calls itself only one time). when I come back to same option by changing the select dropdown i.e.(index == 2) then function calls itself two times. again when I come back to same option by changing the select dropdown i.e.(index == 2) then function calls itself three times. Please help I got stuck in this for about 7 months....

This is my code..

function mktchg() {
var x = document.getElementById("mkt__hub");
var i = x.selectedIndex;
// popOver = document.querySelector('.popup__overlay');
const switchMoggle = document.getElementById('mswitch');
const switchMsoggle = document.getElementById('mskwitch');
const mkBa_1 = document.querySelector('.mkba_1');

if (i == 0) {
    document.querySelector('.sea__tbl_mkt').style.display = 'none';
    document.getElementById('fnl_tl').style.display = 'block';
    // document.querySelector('.mkba').style.display = 'none';
    // document.getElementById('exe_mk1').style.display = 'block';
    document.getElementById('exe_mk2').style.display = 'none';
    document.querySelector('.ist_mk').style.display = 'block';
    document.querySelector('.ist_mk').style.top = '15px';
    document.querySelector('.istr_mkt').style.display = 'none';
    document.getElementById('tx_mk').value = 'Add _ITEM NAME_ item to cart, take a screenshot proving your action.'
    document.getElementById('fnl_in').style.top = '0px';
    document.querySelector('.tgl__area_mkt').style.display = 'none';
    document.querySelector('.tgl__pd_mkt').style.display = 'none';
    document.querySelector('.istr_sw_mk_1').style.display = 'none';
    document.querySelector('.istr_mkt_1').style.display = 'none';
    document.querySelector('.mkba_1').style.display = 'none';
    document.querySelector('.tgl__mkt').classList.remove('show');
    document.querySelector('.tgl__area_mkt').classList.remove('go');
    document.querySelector('.tgl__pd_mkt').classList.remove('ho');
    document.querySelector('.tgl__ist_area').classList.remove('po');
    switchMoggle.checked = false;
    switchMsoggle.checked = false;
    popOver.style.height = '670px';

} else if (i == 1) {
    document.querySelector('.tgl__mkt').classList.remove('show');
    document.querySelector('.tgl__area_mkt').classList.remove('go');
    document.querySelector('.tgl__pd_mkt').classList.remove('ho');
    document.querySelector('.tgl__ist_area').classList.remove('po');
    document.querySelector('.tgl__area_mkt').style.display = 'none';
    document.querySelector('.tgl__pd_mkt').style.display = 'none';
    document.querySelector('.sea__tbl_mkt').style.display = 'none';
    document.querySelector('.istr_e').style.display = 'none';
    document.getElementById('fnl_tl').style.display = 'block';
    // document.querySelector('.mkba').style.display = 'none';
    // document.getElementById('exe_mk1').style.display = 'block';
    document.querySelector('.istr_sw_mk').style.display = 'none';
    document.getElementById('exe_mk2').style.display = 'none';
    document.querySelector('.ist_mk').style.display = 'block';
    document.querySelector('.ist_mk').style.top = '15px';
    document.getElementById('fnl_in').style.top = '0px';
    document.querySelector('.mkba_1').style.display = 'none';
    document.querySelector('.istr_mkt').style.display = 'none';
    document.querySelector('.istr_sw_mk_1').style.display = 'none';
    document.querySelector('.istr_mkt_1').style.display = 'none';
    document.getElementById('tx_mk').value = 'Sign in, add _ITEM NAME_ item to your favourite, take a screenshot proving your action.'
    switchMoggle.checked = false;
    switchMsoggle.checked = false;
    popOver.style.height = '670px';
    console.log(i);
} 
else if (i == 2) {
    var dis = document.querySelector('.tgl__mkt');
    function toggleTrea(e){
        debugger
        document.querySelector('.tgl__mkt').classList.toggle('show');
        document.querySelector('.tgl__area_mkt').classList.toggle('go');
        document.querySelector('.tgl__pd_mkt').classList.toggle('ho');
        document.querySelector('.tgl__ist_area').classList.toggle('po');
        console.log('displaying');
        // document.querySelector('.mkba').classList.add('fo');
        popOver.style.height = '1350px';
        if (dis.classList.contains('show')) {
            document.querySelector('.mkba').style.top = '700px';
            // popOver.style.height = '1350px';
        } 
        else {
            document.querySelector('.mkba').style.top = '350px';
            popOver.style.height = '1010px';
        }

    }
    document.getElementById('lit_btn_mkt').addEventListener('click', toggleTrea);
    
    const toggleTreat = () => {
        if (!dis.classList.contains('show')) {
            if (switchMoggle.checked) {
                if (document.querySelector('.mkba').classList.contains('fo')) {
                    document.querySelector('.mkba').classList.remove('fo');
                    document.querySelector('.mkba').classList.add('lo');
                    popOver.style.height = '1350px';
                    console.log('removing fo adding lo');
                }
                document.querySelector('.mkba').classList.add('lo');
                console.log('adding lo');
                popOver.style.height = '1150px';
            } else {
                document.querySelector('.mkba').classList.remove('lo');
                popOver.style.height = '1010px';
                if (document.querySelector('.mkba').classList.contains('ufo')) {
                    document.querySelector('.mkba').classList.remove('ufo');
                }
            }
        } else if (dis.classList.contains('show')) {
            if (switchMoggle.checked) {
                document.querySelector('.mkba').classList.remove('fo');
                document.querySelector('.mkba').classList.add('ufo');
                popOver.style.height = '1650px';
                console.log('1st show then checked');
            } else {
                document.querySelector('.mkba').classList.remove('ufo');
                document.querySelector('.mkba').classList.add('fo');
                popOver.style.height = '1350px';
            }
            popOver.style.height = '1350px';
        }
    }

    switchMoggle.addEventListener('click', toggleTreat);

    document.querySelector('.sea__tbl_mkt').style.display = 'flex';
    document.querySelector('.sea__tbl_mkt').style.top = '-10px';
    document.querySelector('.istr').style.display = 'none';
    document.querySelector('.material-icons.cm').style.display = 'none';
    // document.querySelector('.material-icons.mkt').style.display = 'block';
    document.getElementById('lit_btn_cm').style.display = 'none';
    // document.getElementById('lit_btn_mkt').style.display = 'block';
    document.getElementById('fnl_tl').style.display = 'block';
    document.getElementById('fnl_in').style.top = '0px';
    document.querySelector('.istr_sw_mk').style.display = 'flex';
    document.querySelector('.istr_mkt').style.display = 'block';
    document.querySelector('.tgl__area_mkt').style.display = 'block';
    document.querySelector('.tgl__pd_mkt').style.display = 'block';
    document.querySelector('.tgl__ist_area').style.display = 'block';
    document.querySelector('.ist_mk').style.display = 'none';
    // document.getElementById('exe_mk1').style.display = 'block';
    document.getElementById('exe_mk2').style.display = 'none';
    document.querySelector('.mkba_1').style.display = 'none';
    document.querySelector('.istr_sw_mk_1').style.display = 'none';
    document.querySelector('.istr_mkt_1').style.display = 'none';
    document.getElementById('kemo').value = "Ask a question about the item _ITEM NAME_, the question must be adequate and relevant to the topic. Take 1 or 2 screenshots showing the question and the fact that it is sent."
    switchMsoggle.checked = false;
    console.log(i);
    popOver.style.top = '97%';
    popOver.style.height = '1010px';
} 
else if (i == 3) {
    switchMsoggle.addEventListener('change' , () => {
        if (switchMsoggle.checked) {
            document.querySelector('.mkba_1').style.display = 'block';
            mkBa_1.style.top = '-42px';
            document.querySelector('.istr_sw_mk_1').style.top = '0px';
            document.querySelector('.istr_mkt_1').style.top = '10px';
            popOver.style.height = '830px';
        } else {
            document.querySelector('.mkba_1').style.display = 'none';
            document.querySelector('.istr_sw_mk_1').style.top = '0px';
            document.querySelector('.istr_mkt_1').style.top = '5px';
            popOver.style.height = '680px';
        }
    });
    document.querySelector('.istr_sw_mk').style.display = 'none';
    document.querySelector('.istr_mkt').style.display = 'none';
    document.querySelector('.istr_sw_mk_1').style.display = 'flex';
    document.querySelector('.istr_mkt_1').style.display = 'block';
    document.querySelector('.istr_sw_mk_1').style.top = '0px';
    document.querySelector('.istr_mkt_1').style.top = '5px';
    document.querySelector('.sea__tbl_mkt').style.display = 'none';
    document.getElementById('fnl_tl').style.display = 'block';
    document.getElementById('fnl_in').style.top = '0px';
    document.querySelector('.ist_mk').style.display = 'none';
    document.querySelector('.tgl__area_mkt').style.display = 'none';
    document.querySelector('.tgl__pd_mkt').style.display = 'none';
    // document.querySelector('.mkba').style.display = 'none';
    mkBa_1.style.display = 'none';
    document.querySelector('.tgl__mkt').classList.remove('show');
    document.querySelector('.tgl__area_mkt').classList.remove('go');
    document.querySelector('.tgl__pd_mkt').classList.remove('ho');
    document.querySelector('.tgl__ist_area').classList.remove('po');
    // document.getElementById('exe_mk1').style.display = 'block';
    document.getElementById('exe_mk2').style.display = 'none';
    switchMoggle.checked = false;
    popOver.style.top = '72%';
    popOver.style.height = '680px';
    console.log(i);
} else {
    document.querySelector('.sea__tbl_mkt').style.display = 'none';
    document.querySelector('.tgl__area_mkt').style.display = 'none';
    document.querySelector('.tgl__pd_mkt').style.display = 'none';
    document.querySelector('.istr_e').style.display = 'none';
    document.getElementById('fnl_tl').style.display = 'none';
    document.getElementById('fnl_in').style.top = '15px';
    document.querySelector('.ist_mk').style.display = 'block';
    document.querySelector('.ist_mk').style.top = '-4px';
    document.querySelector('.istr_sw_mk').style.display = 'none';
    document.querySelector('.istr_mkt').style.display = 'none';
    document.querySelector('.istr_sw_mk_1').style.display = 'none';
    document.querySelector('.istr_mkt_1').style.display = 'none';
    // document.querySelector('.mkba').style.display = 'none';
    // document.getElementById('exe_mk1').style.display = 'none';
    document.getElementById('exe_mk2').style.display = 'block';
    document.querySelector('.tgl__mkt').classList.remove('show');
    document.querySelector('.tgl__area_mkt').classList.remove('go');
    document.querySelector('.tgl__pd_mkt').classList.remove('ho');
    document.querySelector('.tgl__ist_area').classList.remove('po');
    switchMoggle.checked = false;
    switchMsoggle.checked = false;
    popOver.style.top = '72%';
    popOver.style.height = '680px';
}
}
<select id="mkt__hub" onchange="mktchg()" class="msctab active">
<option value="marketplace_add_to_cart" data-tk="action"> Marketplace: add to cart - $ 4.43 per 1000 </option>
<option value="marketplace_add_to_favorite" data-tk="action"> Marketplace: add to favorites - $ 2.50 per 1000 </option>
<option value="marketplace_ask_question" data-tk="action"> Marketplace: ask a question about an item - $ 12.17 per 1000 </option>
<option value="marketplace_activity_5min" data-tk="action">
    Marketplace: find the item + actions up to 5 minutes - $ 18.62 per 1000
</option>
<option value="marketplace_share_soc" data-tk="action"> Marketplace: share the item on social media - $ 12.17 per 1000 </option>
</select>

<div class="ot_mkt">
  <span id="exe_mk1">Execution:</span>
  <span id="exe_mk2">Reposts:</span>
  <div class="ist_mk">
    <span>Instruction:</span>
    <input class="form-control" id="tx_mk" type="text" value="Add _ITEM NAME_ item to cart, take a screenshot proving your action..">
  </div>
  <div class="tgl__ist_area">
    <div class="istr_sw_mk">
      <label for="language" class="title" id="">Instructions:</label>
      <div class="istr_in">
        <div class="mkoggle-switch">
          <input type="checkbox" id="mswitch">
          <label for="mswitch" class="mlider"></label>
        </div>
        <label for="language" class="title" id="exe_sw_mk">extended instructions:</label>
      </div>
    </div>
    <div class="istr_mkt">
      <input class="form-control" type="text" value="Click <b>Like</b> this post, choose emotion __, make a screenshot confirming your action">
    </div>
  </div>
  <div class="mkba">
    <textarea class="form-control" rows="8"></textarea>
  </div>
  <div class="istr_sw_mk_1">
    <label for="language" class="title" id="">Instructions:</label>
    <div class="istr_in">
      <div class="mkoggle-switch1">
        <input type="checkbox" id="mskwitch">
        <label for="mskwitch" class="mlider1"></label>
      </div>
      <label for="language" class="title" id="exe_sw_mk_1">extended instructions:</label>
    </div>
  </div>
  <div class="istr_mkt_1">
    <input class="form-control" type="text" value="Click <b>Like</b> this post, choose emotion __, make a screenshot confirming your action">
  </div>
  <div class="mkba_1">
    <textarea class="form-control" rows="8"></textarea>
  </div>
  <div class="sea__tbl_mkt">
    <div>
      <label>Comment list:</label>
    </div>
    <div class="sea__tbl_second">
      <label>Import:</label>
      <div>
        <span class="material-icons mkt">task</span><small id="lit_btn_mkt">from text</small>
        <span class="material-icons cm">task</span><small id="lit_btn_cm">from text</small>
      </div>
      <div>
        <span class="material-icons">delete</span><small>clear list</small>
      </div>
    </div>
  </div>
  <div class="tgl__area_mkt">
    <table>
      <thead>
        <tr>
          <th width='12%'>Action</th>
          <th width='12%'>Sex</th>
          <th width='15%'>Subject</th>
          <th width='20%'>Text</th>
        </tr>
      </thead>
      <tbody>
        <tr>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td><button type="button">add</button></td>
          <td>
            <select name="language" id="" class="form-control">
              <option value="day">any</option>
              <option value="week">male</option>
              <option value="month">female</option>
            </select>
          </td>
          <td width='10%'><input class="form-select" type="text"></td>
          <td><textarea style="min-height: 40px; max-height: 100px;"></textarea></td>
        </tr>
      </tfoot>
    </table>
    <small>Records from 0 to 0 from 0 records</small>
  </div>
  <div class="tgl__mkt">
    <label class="key_title">Adding lines from text:</label>
    <textarea class="form-control keywords-from-text-area" rows="10"></textarea>
    <div class="le__btn">
      <div class="key__choose">
        <div class="sea__first">
          <input class="form-select" type="file">
        </div>
      </div>
      <div class="key__btn">
        <button type="button">add</button>
        <button type="button">replace</button>
        <button type="button">clear</button>
        <button type="button">cancel</button>
      </div>
    </div>
  </div>
  <div class="tgl__pd_mkt">
    <label for="language" class="title">Comment language:</label>
    <select name="language" id="" class="form-control">
      <option value="day">Any</option>
      <option value="day">English</option>
      <option value="week">Russian</option>
      <option value="month">spanish</option>
    </select>
  </div>
</div>

0

There are 0 answers