Cannot read property 'getAttribute' of undefined - reactjs

Question

I'm a beginner at react.js. I got this error:

Cannot read property 'getAttribute' of undefined full error output in my browser chrome console:

Uncaught TypeError: Cannot read property 'getAttribute' of undefined at clickOnBlock (bundle.js:21172) at ActionLink (bundle.js:21232) at bundle.js:7557 at measureLifeCyclePerf (bundle.js:7327) at ReactCompositeComponentWrapper._constructComponentWithoutOwner (bundle.js:7556) at ReactCompositeComponentWrapper._constructComponent (bundle.js:7531) at ReactCompositeComponentWrapper.mountComponent (bundle.js:7439) at Object.mountComponent (bundle.js:13856) at ReactCompositeComponentWrapper.performInitialMount (bundle.js:7622) at ReactCompositeComponentWrapper.mountComponent (bundle.js:7509)

my codes:

var React = require('react');
var ReactDOM = require('react-dom');
var x;
var y;
var z;
var zz;
var counter=0;
function ActionLink() {

    function  clickOnBlock(d) {
        if (counter<2){
            x = d.getAttribute("data-color");
            y = d.getAttribute("data-u");
            document.getElementById("d" + (y)).style.backgroundColor = x;
            document.getElementById("lastClick").value = x;

            if(counter==0) {
                // Store
                localStorage.setItem("keepLast", x);
                // Retrieve
                z= document.getElementById("result").innerHTML = localStorage.getItem("keepLast");
            }

            if(counter==0) {
                // Store
                localStorage.setItem("id", y);
                // Retrieve
                zz= document.getElementById("resultId").innerHTML = localStorage.getItem("id");
            }
            counter++;

            if(counter==2){
                if(x==z && y!=zz){
                    yes();
                }else{
                    no();
                }
            }
        }
    }
    function no(){
        setTimeout(function() {
            remove();
        }, 1000);
    }

    function remove(){
        document.getElementById("d" + (y)).style.backgroundColor ="";
        document.getElementById("d" + (zz)).style.backgroundColor ="";
        counter=0

    }

    function yes(){
        setTimeout(function() {
            ok();
        }, 1000);
    }
    function ok() {
        document.getElementById("d" + (y)).style.backgroundColor = "";
        document.getElementById("d" + (zz)).style.backgroundColor = "";
        document.getElementById("d" + (y)).style.backgroundColor = "black";
        document.getElementById("d" + (zz)).style.backgroundColor = "black";
        counter=0
    }


    return (
        <div>
            <div id="bigdiv">
                <a id="d1"  type="button" data-u="1" data-color="green" onClick={clickOnBlock(this)}></a>
                <a id="d2"  type="button" data-u="2" data-color="yellow" onClick={clickOnBlock(this)}></a>
                <a id="d3"  type="button" data-u="3" data-color="deeppink" onClick={clickOnBlock(this)}></a>
                <a id="d4"  type="button" data-u="4" data-color="green" onClick={clickOnBlock(this)}></a>
                <br/>
                <a id="d5"  type="button" data-u="5" data-color="blue" onClick={clickOnBlock(this)}></a>
                <a id="d6"  type="button" data-u="6" data-color="orange" onClick={clickOnBlock(this)}></a>
                <a id="d7"  type="button" data-u="7" data-color="deeppink" onClick={clickOnBlock(this)}></a>
                <a id="d8"  type="button" data-u="8" data-color="red" onClick={clickOnBlock(this)}></a>
                <br/>
                <a id="d9"  type="button" data-u="9" data-color="red" onClick={clickOnBlock(this)}></a>
                <a id="d10" type="button" data-u="10" data-color="yellow" onClick={clickOnBlock(this)}></a>
                <a id="d11" type="button" data-u="11" data-color="orange"onClick={clickOnBlock(this)}></a>
                <a id="d12" type="button" data-u="12" data-color="blue" onClick={clickOnBlock(this)}></a>
            </div>
            <input id="lastClick" type="hidden" value="" />
                <div id="result" className="dd" ></div>
                <div id="resultId" className="dd" ></div>
        </div>

    );
}

ReactDOM.render(<ActionLink /> ,  document.getElementById('app'));

Andrii Starusiev · Accepted Answer · 2018-09-14 06:29:37Z

3

Pass event into your function and get attribute with e.target:

<a id="d1"  type="button" data-u="1" data-color="green" onClick={(e) => clickOnBlock(e)}></a>

Or just pass nothing, JS will do it for you:

<a id="d1"  type="button" data-u="1" data-color="green" onClick={clickOnBlock}>

function  clickOnBlock(e) {
    console.log(e.target.getAttribute("data-color"));
}

Note:

onClick={clickOnBlock(param)}

This function will execute with every render, without click. You need to pass a function with onClick but you are passing a result of this function execute. To avoid this, use an arrow functions:

onClick={() => clickOnBlock(param)}

edited Sep 14, 2018 at 6:29

answered Sep 16, 2017 at 9:58

Andrii Starusiev

7,7942 gold badges31 silver badges40 bronze badges

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

Comments

Sagiv b.g · Accepted Answer · 2017-09-16 09:13:12Z

0

When passing an event handler you don't need to invoke the handler or pass this as the target.
Try changing the way you pass the handler from this:

`onClick={clickOnBlock(this)}`

To this:

onClick={clickOnBlock}

answered Sep 16, 2017 at 9:13

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

Comments

ThinkGeek · Accepted Answer · 2017-09-16 09:13:24Z

function  clickOnBlock() {
    return (d) => { if (counter<2){
        x = d.getAttribute("data-color");
        y = d.getAttribute("data-u");
        document.getElementById("d" + (y)).style.backgroundColor = x;
        document.getElementById("lastClick").value = x;

        if(counter==0) {
            // Store
            localStorage.setItem("keepLast", x);
            // Retrieve
            z= document.getElementById("result").innerHTML = localStorage.getItem("keepLast");
        }

        if(counter==0) {
            // Store
            localStorage.setItem("id", y);
            // Retrieve
            zz= document.getElementById("resultId").innerHTML = localStorage.getItem("id");
        }
        counter++;

        if(counter==2){
            if(x==z && y!=zz){
                yes();
            }else{
                no();
            }
        }
    }
}}

onClick={() => this.clickOnBlock()}

Collectives™ on Stack Overflow

Cannot read property 'getAttribute' of undefined - reactjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related