CODEWITHSUNDEEP
javascriptjquery
Quantico
Quantico

Reputation: 2446

pass variable from a dom element to onclick

I am trying to add a text from a DOM element to an onclick function. So the text will be a parameter

I tried

$("body").append(
  "<input type='submit' value='Submit Answers' onclick=displayImages(" + 
  $('#hidden_number').text() +  ");'>")

but this gives me $('#hidden_number').text() as undefined , but if I run $('#hidden_number').text() from the console i get a value.

Is it not possible to pass a parameter this way?

More code

The html page looks like this

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="core/js/self_control.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("body").append( "<input type='submit' value='Submit Answers' onclick=displayImages( $('#hidden_number').text());'>");
});
</script>

<label for="subID">Subject ID:</label>
<input type="text" id="subID" name="subID"/>
<br><br>
<div> Please enter your subject </div>
<br>
<body>
</body>

the file self_control.js has the displayImages function

function displayImages(number){
    $('body').toggleClass('blackBody'); // set the color of the expr background to black
    console.log(number)
}

the way that I load the page and the number to the hidden array is:

function loadQuestionForm(number){
    $.get("core/questionForm0.html", function(data) {
                $("body").html(data);
                var next_img = number + 1 ;
                console.log(next_img);
                $("body").append("<div id='hide_nubmer' style='display: none;'>"+ next_img +"</div>")
    });

Upvotes: 0

Views: 141

Answers (2)

KoU_warch
KoU_warch

Reputation: 2150

i think it looks like just a typo?

$("body").append("<div id='hide_nubmer' style='display: none;'>"+ next_img +"</div>")

should have the id be hidden_number?

function loadQuestionForm(number){
    $.get("core/questionForm0.html", function(data) {
                $("body").html(data);
                var next_img = number + 1 ;
                console.log(next_img);
                $("body").append("<div id='hidden_number' style='display: none;'>"+ next_img +"</div>")
    });

Upvotes: 0

mdatsev
mdatsev

Reputation: 3879

You can do it like this: 

$("body").append("<input type='submit' value='Submit Answers' onclick=displayImages(" + $('#hidden_number').text() + ");>")

function displayImages(arg) {
  console.log(arg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hidden_number">5</div>

Upvotes: 1

Related Questions