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>