I want to know how to get elements with DOM

Question

0.00/5 (No votes)

See more:

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="uft-8">
        <title>Pomodoro Timer</title>
    </head>
    <body>
        <p class="menu">menu</p>
        <p class="display-time"><span class='display' ditail='hours' >00</span><span>:</span><span class='display' ditail='minutes'>00</span><span>:</span><span class='display' ditail='minutes'>00</span></p>
        <div time-option='hours' class='set_time'>
            <button class='high' class='set_hours'>+</button>
            <button class='low'  class='set_hours'>-</button>
        </div>
        <div time-option='minutes' class='set_time'>
            <button class='high' class='set_minutes'>+</button>
            <button class='low'  class='set_minutes'>-</button>
        </div>
        <div time-option='seconds' class='set_time'>
            <button class='high' class='set_seconds'>+</button>
            <button class='low'  class='set_seconds'>-</button>
        </div>
        <button data-option='start' class="timer_button" >start</button>
        <button data-option='stop'  class="timer_button">stop</button>
        <button data-option='reset' class="timer_button">reset</button>
        <script>
        const buttons = document.querySelectorAll('.timer_button');
        const forSetTime = document.querySelectorAll('.set_time');
        const st1 = document.getElementsByClassName('high');
        const st2 = document.getElementsByClassName('low');
        
        
        function test(e){
            console.log(e);
        }

        function functionForSetTime(e){
           // console.log(e);
           if(e.target.includes('high')){
                console.log('a');
             }else{
            console.log('ew');}
        }
                     
        buttons.forEach((buttons)=>buttons.addEventListener('click',test));
        forSetTime.forEach((forSetTime)=>forSetTime.addEventListener('click',functionForSetTime));
        </script>
    </body>
</html>

What I have tried:

I tried some of things, like if includes() method work, but it wasn't I think.
I would like to get elements with using 'high' and 'low' classes, because I want to create timer, so when I add time, to do this I want to get elements from there and add time from dom and later I want to rewritte information with innerHTML.

Posted 31-Dec-18 3:18am

Member 14104448

Updated 1-Jan-19 7:32am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Eric Lynch · Answer 1 · 2018-12-31T06:09:00

If its a quick project, the following is easy...

HTML DOM getElementsByClassName() Method[^]

If you'll be doing a lot of this sort of thing, you may want to check out jQuery...

jQuery Tutorial[^]

Specifically...

jQuery .class Selector[^]

UPDATE: I notice, after re-reading your question more carefully, that you may have tried getElementsByClassName. If this is the case, you should probably improve your question to indicate what specific problem(s) you encountered. For example, did you get an error? If so, what error? Or, did it fail to behave as you expected? If so, what were your expectations and how specifically did it fail to meet them? Otherwise, its difficult for anyone to help you beyond posting some documentation links.

Bryian Tan · Answer 2 · 2019-01-01T07:33:00

Quote:
I tried some of things, like if includes() method work, but it wasn't I think.
I would like to get elements with using 'high' and 'low' classes, because I want to create timer, so when I add time, to do this I want to get elements from there and add time from dom and later I want to rewritte information with innerHTML.

By looking at the code and the post, I'm guessing the code is trying to check if a class (high/low) associate with a button? You can change the code to utilize the target className attribute. includes() function might not be suitable, usually, its usage is to check if a string is part of another string or if a value in an array. e.target clearly is not a string or an array type.

JavaScript

if(e.target.className == 'high'){
                console.log('a');
             }

Array.prototype.includes() | MDN[^]
String.prototype.includes() | MDN[^]

I want to know how to get elements with DOM

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0