CODEWITHSUNDEEP
javascriptjquerycss
Ashif Smartec
Ashif Smartec

Reputation: 1

Js display division is not working

Need to display given div (valueV, valueJ & valueO) based on user text input id=pcode. Scripted js, form and divisions as follows, but isn't working. Tried different method and refered stacks, cant fix, pls help

<script type="text/javascript">
var pcode;
function onload() { 
    pcode = document.getElementById('pcode');
}

function kk() {
if (pcode == 'v') {
    document.getElementById("valueV").style.display = "inline";
} else if (pcode == 'j') {
    document.getElementById("valueJ").style.display = "inline";
}
} else {
    document.getElementById("valueO").style.display = "inline";
}
}    
</script>

<body onload="onload();">
<input type="text" name="two"  value="" id="pcode" maxlength="1" size="1">  &nbsp;<input type="button" value="Submit" onclick="kk();"/>
</body>

<div id="valueV" style="display: none;">
    Value V
</div>
<div id="valueJ" style="display: none;">
    Value J
</div>
<div id="valueO" style="display: none;">
    Value O
</div>

Upvotes: 0

Views: 104

Answers (3)

Luke Punnett
Luke Punnett

Reputation: 25

I tried to keep your code as similar as possible for you without making any major changes but ensuring it still worked.

I changed a couple of things for you, I removed an extra bracket you had in your else statement.

I also removed the ; you had in reference to functions within your html. I hope this code is what you need: 

<body onload="onload()">
<input type="text" name="two"  value="" id="pcode" maxlength="1" size="1">  &nbsp;<input type="button" value="Submit" onclick="kk()"/>
</body>

<div id="valueV" style="display: none;">
    Value V
</div>
<div id="valueJ" style="display: none;">
    Value J
</div>
<div id="valueO" style="display: none;">
    Value O
</div>

<script>
var pcode;
function kk() {
  pcode = $('#pcode').val();
if (pcode == 'v') {
    document.getElementById("valueV").style.display = "inline";
} else if (pcode == 'j') {
    document.getElementById("valueJ").style.display = "inline";
} else {
    document.getElementById("valueO").style.display = "inline";
}
} 
</script>

Any questions just ask!

Upvotes: 0

ryanpcmcquen
ryanpcmcquen

Reputation: 6455

You should read up on addEventListener. Using HTML attributes to attach event listeners is going to lead you to a path of several global variables (as well as some ugly markup).

document.addEventListener('DOMContentLoaded', function () {
    var pcode = document.getElementById('pcode');

    document.querySelector('.submit').addEventListener('click', function () {
        if (pcode.value == 'v') {
            document.getElementById("valueV").style.display = "inline";
        } else if (pcode.value == 'j') {
            document.getElementById("valueJ").style.display = "inline";
        } else {
            document.getElementById("valueO").style.display = "inline";
        }
    });
});
<body>
    <input type="text" name="two" value="" id="pcode" maxlength="1" size="1"> &nbsp;
    <input type="button" value="Submit" class="submit" />

    <div id="valueV" style="display: none;">
        Value V
    </div>
    <div id="valueJ" style="display: none;">
        Value J
    </div>
    <div id="valueO" style="display: none;">
        Value O
    </div>
</body>

Upvotes: 0

epascarello
epascarello

Reputation: 207501

pcode is the DOM element and you are comparing it to a string. A simple console.log(pcode) will show you that. You need to look at the value. 

if (pcode.value === "j")

Upvotes: 1

Related Questions