How to append string into the run time html attribute value using Java script/jQuery?

HTML Code

A) <input type="text" id="1" name="Q-1>1>1=1" value="SELECT" style="width: 60px; height: 25px; text-align: center; cursor: pointer; border: 2px solid black;" onfocus="this.blur()" onclick="getTriStateMarks(this)" ;="">

B) <input type="text" id="1O" name="Q-1>1>1=1" value="SELECT" style="width: 60px; height: 25px; text-align: center; cursor: pointer; border: 2px solid black; display:none" onfocus="this.blur()" onclick="getTriStateMarks(this)" ;="">

I need to change the display attribute of B to 'block'.

Solution attempted:

var strNotApplicableControlName = $(htmControl).attr('id'); //return value is 1 (id of A)
strNotApplicableControlName = strNotApplicableControlName.concat("O");
//strNotApplicableControlName = strNotApplicableControlName + "O"; //Not working
//using js
document.getElementById(strNotApplicableControlName).style.display = 'block';
//using jQuery
$(strNotApplicableControlName).css('display','block');
$("'" + strNotApplicableControlName + "'").css('display','block');

Output of concatination:

"1"O

I am clueless to identify the issue. Thanks for your help.

Answers 1

  • You can use javascript:

    document.getElementById('1O').style.display = 'block';
    <input type="text" id="1" name="Q-1>1>1=1" value="SELECT" style="width: 60px; height: 25px; text-align: center; cursor: pointer; border: 2px solid black;" onfocus="this.blur()" onclick="getTriStateMarks(this)" ;="">
    
    <input type="text" id="1O" name="Q-1>1>1=1" value="SELECT" style="width: 60px; height: 25px; text-align: center; cursor: pointer; border: 2px solid black; display:none" onfocus="this.blur()" onclick="getTriStateMarks(this)" ;="">

    Or Jquery:

    $('#1O').css('display', 'Block');
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="text" id="1" name="Q-1>1>1=1" value="SELECT" style="width: 60px; height: 25px; text-align: center; cursor: pointer; border: 2px solid black;" onfocus="this.blur()" onclick="getTriStateMarks(this)" ;="">
    
    <input type="text" id="1O" name="Q-1>1>1=1" value="SELECT" style="width: 60px; height: 25px; text-align: center; cursor: pointer; border: 2px solid black; display:none" onfocus="this.blur()" onclick="getTriStateMarks(this)" ;="">


Related Articles