javascript - jquery values are changing to undefined and "" with contradicting console output -

javascript - jquery values are changing to undefined and "" with contradicting console output -

i'm trying alter value of 2 input boxes using jquery. 1 hidden , other visible. utilize jquery grab info other elements on page , store text 2 variables, optid , oldopt. have variables placed strings create little html form. example:

var somevar = someinfo; var formpiece = $('<input value="' + somevar + '" type=text>';

when print variables console expect @ first, output becomes confusing me. code.

$(document).on('click', '.opttext', function() { var optid = '#' + $(this).attr('id'); var oldopt = $(optid + ":first-child").text(); console.log(optid); console.log(oldopt); var editoptform = $('<form>' + '<input type=text value=' + optid + ' name=targetopt style="display: none;">' + '<div>insert new option</div>' + '<input name=optinput type=text value="' + oldopt + '"></input>' + '<div id=qsubbutton>change</div></form>').hide(); $('#editorcontent').hide(); $('#editorcontent').html(editoptform); editoptform.fadein('slow'); $('#editorcontent').show('slow'); console.log("value of thing 1 i'm trying change: " + $('input[name=targetopt]').val()); console.log("value of thing 2 i'm trying change: " + $('input[name=optinput]').val()); });

and console looks this:

"#opt0" "new option" "value of thing 1 i'm trying change: #opt0" "value of thing 2 i'm trying change: new option" "#undefined" "" "value of thing 1 i'm trying change: undefined" "value of thing 2 i'm trying change: undefined"

at first console writes correct value optid: #opt0 , correct output oldopt: new option. , correct output changed values. then writes "#undefined" , "". don't understand why, when check page's source code values tried alter match "#undefined" , "". then writes value of inputs i'm trying alter "#undefined" , "". can help me understand these lastly 4 lines coming from?

javascript jquery input