Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Show and hide images using dropdown (js , html)

Was trying to make a multipurpose calendar application
Currently i only need fron August…

$('#aug').hide
$('#sep').hide
$('#oct').hide
$('#nov').hide
$('#dec').hide

function aug() {
  $('#aug').show
  $('#sep').hide
  $('#oct').hide
  $('#nov').hide
  $('#dec').hide
}

function sep() {
  $('#aug').hide
  $('#sep').show
  $('#oct').hide
  $('#nov').hide
  $('#dec').hide
}

function oct() {
  $('#aug').hide
  $('#sep').hide
  $('#oct').show
  $('#nov').hide
  $('#dec').hide
}

function nov() {
  $('#aug').hide
  $('#sep').hide
  $('#oct').hide
  $('#nov').show
  $('#dec').hide
}

function dec() {
  $('#aug').hide
  $('#sep').hide
  $('#oct').hide
  $('#nov').hide
  $('#dec').show
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="page-1" id="page-1">
  <div class="calender" id="calender">
    <select name="" id="">
      <option value="">Jan</option>
      <option value="">Feb</option>
      <option value="">Mar</option>
      <option value="">Apr</option>
      <option value="">May</option>
      <option value="">Jun</option>
      <option value="">Jul</option>
      <option value="">Aug</option>
      <option value="">Sep</option>
      <option value="">Oct</option>
      <option value="">Nov</option>
      <option value="">Dec</option>
    </select>
    <div id="img-grp" class="img-grp">
      <img src="" alt="Jan" id="Jan">
      <img src="" alt="Feb" id="Feb">
      <img src="" alt="Mar" id="mar">
      <img src="" alt="Apr" id="Apr">
      <img src="" alt="May" id="may">
      <img src="" alt="Jun" id="jun">
      <img src="" alt="Jul" id="jul">
      <img src="months-png/aug.png" alt="Aug" onclick="aug()" id="aug">
      <img src="months-png/sep.png" alt="Sep" onclick="sep()" id="sep">
      <img src="months-png/oct.png" alt="Oct" onclick="oct()" id="oct">
      <img src="months-png/nov.png" alt="Nov" onclick="nov()" id="nov">
      <img src="months-png/dec.png" alt="Dec" onclick="dec()" id="dec">
    </div>
  </div>

I tried using jquery, $('#aug').hide
but it just gave
the page

can anyone pls help

there are also some extra code which shows the time and more images…

more details : it is running locally, and have no plans to host..
according to visual studio code , there are no problems in the code…
google chrome also says there are no problems inn the code., Atleast it doesnt show up in the console

full code:


<script src="JQuery(nonLicenced).js"></script>
<script src="https://kit.fontawesome.com/f4453c02b1.js" crossorigin="anonymous"></script>

<div class="main" id="top-section">
    <div class="page-0" id="page-0">
        <p class="Clock" id="p1"></p>
        <p class="date" id="p2">susu</p>
    </div>
    <div class="page-1" id="page-1">
        <div class="calender" id="calender">
            <select name="" id="calender-select">
                <option value="">Jan</option>
                <option value="">Feb</option>
                <option value="">Mar</option>
                <option value="">Apr</option>
                <option value="">May</option>
                <option value="">Jun</option>
                <option value="">Jul</option>
                <option value="" >Aug</option>
                <option value=""  >Sep</option>
                <option value="" >Oct</option>
                <option value="" >Nov</option>
                <option value=""  >Dec</option>
            </select>
            <div id="img-grp" class="img-grp">
                <img src="" alt="Jan" id="Jan">
                <img src="" alt="Feb" id="Feb">
                <img src="" alt="Mar" id="mar">
                <img src="" alt="Apr" id="Apr">
                <img src="" alt="May" id="may">
                <img src="" alt="Jun" id="jun">
                <img src="" alt="Jul" id="jul">
                <img src="months-png/aug.png" alt="Aug" id="aug">
                <img src="months-png/sep.png" alt="Sep" id="sep">
                <img src="months-png/oct.png" alt="Oct" id="oct">
                <img src="months-png/nov.png" alt="Nov" id="nov">
                <img src="months-png/dec.png" alt="Dec" id="dec">
            </div>
        </div>
        <div class="date-section" id="date-section"></div>
    </div>
</div>
<nav class="nav" id="bottom-nav">
    <button id="left-button" class="left-b" onclick="leftb()"><i class="fa-solid fa-arrow-left"></i></button>
    <button id="right-button" class="right-b" onclick="rightb()"><i class="fa-solid fa-arrow-right"></i></button>
    <div class="stamp" id="section-stamp">
        <span class="dot" id="dot-1"></span>
        <span class="dot" id="dot-2"></span>
        <span class="dot" id="dot-3"></span>
        <span class="dot" id="dot-4"></span> 
    </div>
    <button class="setting-b" id="settings-button"><i class="fa-solid fa-gear"></i></button>
    <button id="add" class="add"><i class="fa-solid fa-plus"></i></button>
</nav>
<style>
    body {
        overflow-y: hidden;
    }
   
    nav {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width:100%;
        height: 50px;
    }
    nav button{
        width: 50px;
        height: 50px;
        border: none;
        background-color: #2d60ac;
        border-radius: 7px;
    }
    .setting-b {
        position: absolute;
        right: 55px;
        top: 0px;
    }
    .add {
        position: absolute;
        right: 2px;
        top: 0px;
    }
    i {
        color: white;
    }
    .clock {
        font-size: 200px;
        color: #2d60ac;
        width: 500px;
        height: 300px;
        position: absolute;
        left: 13%;
        top: -7%;
        font-weight: 300;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    .date {
        font-size: 18px;
        color: #2d60ac;
        width: 500px;
        height: 300px;
        position: absolute;
        left: 20%;
        top: 55%;
        font-weight: 100;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    .dot {
        height: 25px;
        width: 25px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
      }
      .stamp {
        position: absolute;
        top: 12.5px;
        left: 40%;
      }
      .noDisplay {
        display: none;
      }
</style>
<script>
    function updateClock() {
        const currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        
        // Pad the minutes and seconds with leading zeros if needed
        minutes = (minutes < 10 ? "0" : "") + minutes;
        seconds = (seconds < 10 ? "0" : "") + seconds;
        
        // Format the time as HH:MM:SS
        var timeString = hours + ":" + minutes + ":" + seconds;
        
        // Update the clock text
        var clockElement = document.querySelector('.clock');
        clockElement.textContent = timeString;

        document.getElementsByClassName("date").innerHTML = currentTime.toDateString();
      }
      
      // Call the updateClock function every second
      setInterval(updateClock, 1000);
      
</script>
<script>
    dotnumb()
    var page = 0;
    function rightb() {
        if (page != 3) {
            page = page + 1
        } else {
            page = 3
            console.log("NO MORE Pages")
        }
    }
    function leftb() {
        if (page != 0) {
            page = page - 1
        } else {
            page = 0
            console.log("NO MORE Pages")
        }
    }

    function dotnumb() {
        if(page = 0) {
           document.getElementById('dot-1').style.width = '50px'
           document.getElementById('dot-2').style.width = '25px'
           document.getElementById('dot-3').style.width = '25px'
           document.getElementById('dot-4').style.width = '25px'
           page = 0
        }
        if(page = 1) {
            document.getElementById('dot-2').style.width = '50px'
            document.getElementById('dot-1').style.width = '25px'
            document.getElementById('dot-3').style.width = '25px'
            document.getElementById('dot-4').style.width = '25px'
            page = 1
        }
        if(page = 2) {
            document.getElementById('dot-3').style.width = '50px'
            document.getElementById('dot-1').style.width = '25px'
            document.getElementById('dot-2').style.width = '25px'
            document.getElementById('dot-4').style.width = '25px'
            page = 2
        }
        if(page = 3) {
            document.getElementById('dot-4').style.width = '50px'
            document.getElementById('dot-3').style.width = '25px'
            document.getElementById('dot-2').style.width = '25px'
            document.getElementById('dot-1').style.width = '25px'
            page = 3
        }
    }
</script>
<script>
    const
    calenderSelect = document.querySelector('#calender-select')
  , calenderImgs   = document.querySelectorAll('#img-grp > img')
    ;
  
  showCalenderImg(); // first attempt.
  calenderSelect.addEventListener('change', showCalenderImg);
  
  function showCalenderImg()
    {
    calenderImgs.forEach( img => img.classList.toggle('noDisplay', img.id != calenderSelect.value ))
    }
</script>
Tags:

2

Answers


  1. 0

    (1) You’re missing () at the end of your functions. e.g. $(‘#aug’).hide should be $(‘#aug’).hide(). Without these parentheses, the methods are not actually being executed, which is why you’re not seeing any changes on the page.

    (2) Hide everything but August at the beginning.

    $('#aug').show();
$('#sep').hide();
$('#oct').hide();
$('#nov').hide();
$('#dec').hide();
    Login or Signup to reply.
  2. 0

    Your logic doesn’t hold water, clicking on the image of a month to make it appear alone doesn’t really make sense, because you will no longer be able to make one of the other hidden months appear because they will no longer be clickable…

    I think you are looking for something like this ?

    const
  calenderSelect = document.querySelector('#calender-select')
, calenderImgs   = document.querySelectorAll('#img-grp > img')
  ;

showCalenderImg(); // first attempt.
calenderSelect.addEventListener('change', showCalenderImg);

function showCalenderImg()
  {
  calenderImgs.forEach( img => img.classList.toggle('noDisplay', img.id != calenderSelect.value ))
  }
    .noDisplay { 
  display: none;
  }
    <div class="page-1" id="page-1">
  <div class="calender" id="calender">
    <select id="calender-select">
      <option value="Jan">Jan</option>
      <option value="Feb">Feb</option>
      <option value="mar">Mar</option>
      <option value="Apr">Apr</option>
      <option value="may">May</option>
      <option value="jun">Jun</option>
      <option value="jul">Jul</option>
      <option value="aug">Aug</option>
      <option value="sep">Sep</option>
      <option value="oct">Oct</option>
      <option value="nov">Nov</option>
      <option value="dec">Dec</option>
    </select>
    <div id="img-grp" class="img-grp">
      <img src=""                   alt="Jan" id="Jan">
      <img src=""                   alt="Feb" id="Feb">
      <img src=""                   alt="Mar" id="mar">
      <img src=""                   alt="Apr" id="Apr">
      <img src=""                   alt="May" id="may">
      <img src=""                   alt="Jun" id="jun">
      <img src=""                   alt="Jul" id="jul">
      <img src="months-png/aug.png" alt="Aug" id="aug">
      <img src="months-png/sep.png" alt="Sep" id="sep">
      <img src="months-png/oct.png" alt="Oct" id="oct">
      <img src="months-png/nov.png" alt="Nov" id="nov">
      <img src="months-png/dec.png" alt="Dec" id="dec">
    </div>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search