2

I am very new to programming and I am wondering if anyone can help me with this.

I am trying to make a pop up page. I set variables for each click area which I set each area with div and placed with css. Also for each pop up image which I put div id on each image on html and set display = "none" on css. I want to make a function that shows one image on touchend and hide other images at the same time.

Could you help me with my code?

var pop = new Array("pop1","pop2","pop3","pop4","pop5","pop6");    
var clickArea = new Array("click1","click2","click3","click4","click5","click6");    
function diplay(click,show,hide){   
    click.addEventListner("touchend",function(){    
       show.style.display = "block";    
       hide.style.display = "none";    
    });    
};    
display("click[0]","pop[0]","pop[1,2,3,4,5]");
Improve this question
2
  • This jQuery plugin does what you're looking for: tosrus.frebsite.nl/examples.php . The site has instructions. Commented Jan 4, 2015 at 2:58
  • Thank you! I will use this when I study jQuery. Commented Jan 4, 2015 at 4:50

3 Answers 3

Reset to default
1

There are a few different issues with your code.

  1. You used strings instead of the actual code structure references while calling display. I see that you mean for these to reference the element ids, but you must first get the element with document.getElementById(...) or jQuery's $("#...").
  2. In the pop and clickArea arrays, you used strings, which do not have the .style object. You need to reference the elements themselves.
  3. Your code structure is not designed to handle arrays.
  4. You need to define the addEventListener before you need the function handler to be called. You do not want this every time.
  5. The click argument in the display function is redundant, as it is never called.
  6. You are using jQuery. You should have stated this! (but you're forgiven) :)
  7. You can't reach into arrays with the syntax arrayName[#,#,#].
  8. You misspelled "display". Whoops!
  9. The arrays are redundant, since the code needed to be restructured.

First, in order to address Point #4, we need this code to run when the DOM has finished loading:

var clickArea = new Array("click1","click2","click3","click4","click5","click6");
clickArea.each(function(id){
    $("#"+id)[0].addEventListener("touchend", display);
});

Next, we need to fix the issues with your code. They're explained above.

var pop = new Array("pop1","pop2","pop3","pop4","pop5","pop6");
function display(event){
    var indx = Number(event.target.id.split(/\D/i).join(""));
    $("#pop"+indx)[0].style.display = "block";
    pop.each(function(ide) {
        if (ide.split(/\D/i).join("") != indx-1) {
            $("#"+ide)[0].style.display = "none";
        }
    });
};

Otherwise, great job! All of us started out like this, and believe in you! Keep it up! P.S. You can set arrays like this [ ? , ? , ? , ? ] instead of this new Array( ? , ? , ? , ? ).

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I echo @fond42518's comment about using Array literals - in fact, you should almost NEVER use new Array() over just creating array literals [].
Thank you very very much!! I think someone deleted my title part saying Javascript. I haven't tried jQuery yet. It seems like more simplified in jQuery. Can I do the same thing with Javascript?
Yes, you can do the exact same things in plain JavaScript, although the element id selectors are document.getElementById(...) instead of $(#...), and the plain JavaScript method returns only one element, rather than an array. Also, you'd have to use a for loop instead of jQuery's .each function.
Thank you! I will try JS and jquery.
1

Here is an example using for loops instead of methods of Arrays etc

Start off by defining everything you can

var popup_id = ["pop1", "pop2", "pop3", "pop4", "pop5", "pop6"],
    popup_elm = [], // for referencing the elements later
    area_id = ["click1", "click2", "click3", "click4", "click5", "click6"],
    area_elm = [], // for referencing the elements later
    i; // for the for -- don't forget to var everything you use
// a function to hide all popups
function hideAll() {
    var i; // it's own var means it doesn't change anything outside the function
    for (i = 0; i < popup_elm.length; ++i) {
        popup_elm.style.display = 'none';
    }
}
// a function to attach listeners
function listenTouch(area, popup) {
    area.addEventListener('touchend', function () {
        hideAll();
        popup.style.display = 'block';
    });
    // we did this in it's own function to give us a "closure"
}

Finally we are ready do begin linking it all to the DOM, I'm assuming the following code is executed after the elements exist in the browser

// setup - get Elements from ids, attach listeners
for (i = 0; i < popup_id.length; ++i) {
    popup_elm[i] = document.getElementById(popup_id[i]);
    area_elm[i] = document.getElementById(area_id[i]);
    listenTouch(area_elm[i], popup_elm[i]);
}
Improve this answer

1 Comment

Thank you very much! I did get variables for each pop with document.getElementById but I didn't know that I can use for loop. I was using 6lines to get variables for each pop. Thank you so much!
0

You cannot treat strings as html elements.

Assuming there are elements with click area ids in the page, you may do something like (once the document is ready).

var popEls = pop.map(function (id) { return document.getElementById(id) });

clickArea.forEach(function (id) {
 var clickAreaEl = document.getElementById(id);
 clickAreaEl.addEventListener('click', onClickAreaClick);
});

function onClickAreaClick() {
    var clickAreaNum = +this.id.match(/\d+$/)[0],
        popIndex = clickAreaNum - 1;

    popEls.forEach(function (popEl) {
        popEl.style.display = 'none';
    });

   popEls[popIndex].style.display = 'block';
}
Improve this answer

1 Comment

Thank you very much!!wow it is amazing that I can learn a lot from your code. Thank you thank you thank you!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.