-1

I try to make simple html with javascript for studying html. But when I run the html in browser, it return undefined in console log when trying to get Button 1 and Button 2 value.

Html:

<!DOCTYPE html>
<html>
<script src="js/Try.js"></script>
<head>
    <title>Try</title>
</head>

<body>
    <div class="wrapper">
        <div>
            <a type="button" id="Button1" href="#" value="B1" onmouseover="PutValueLog(this)">Button 1</a>
            <a type="button" id="Button2" href="#" value="B2" onmouseover="PutValueLog(this)">Button 2</a>
        </div>
    </div>
</body>
</html>

Javascript:

var tempval;

function PutValueLog(button){
    tempval = button.value;
    console.log(button);
    console.log(tempval);
}

And the console log that I get:

log image

Can anyone tell me why that happen? What I must do to get value not undefined but B1 or B2 in my console log?

techraf
  • 64,883
  • 27
  • 193
  • 198
KartuHitam
  • 3
  • 2

2 Answers2

2

You have a a tag and not a input. So you cannot use the value to get the value of the anchor tag. Use the .getAttribute() function to get the value of the attribute.

var tempval;

function PutValueLog(button){
  debugger;
    tempval = button.getAttribute('value');
    //console.log(button);
    alert(tempval);
}
<div class="wrapper">
        <div>
            <a type="button" id="Button1" href="#" value="B1" onmouseover="PutValueLog(this)">Button 1</a>
            <a type="button" id="Button2" href="#" value="B2" onmouseover="PutValueLog(this)">Button 2</a>
        </div>
    </div>
Rajshekar Reddy
  • 18,647
  • 3
  • 40
  • 59
0

Modify your code as following:

var tempval;

function PutValueLog(button){
    tempval = button.getAttribute("value"); //value is not a defined property of an anchor
    console.log(button);
    console.log(tempval);
}
Sunny Sharma
  • 4,688
  • 5
  • 35
  • 73