Develop Reference

Getting Input Values from Appended Divs

I am having trouble getting the input values from a div that I appended. It returns as undefined. So basically I am creating the input element and giving it an Id. I have a function that when I clicked a button it is suppose to show the input value..
I am relatively new to JavaScript and I can't seem to find any solution for this. Please help me.. thank you
I am currently doing this in the same JavaScript script so there is no HTML script.
var question1ProjectTitleDiv = document.createElement("div");
var question1ProjectTitle= document.createElement("span")
var question1ProjectTitleName= document.createTextNode("Project Title:")
var question1ProjectTitleInput = document.createElement("input");
question1ProjectTitleInput.type= "text"
question1ProjectTitleInput.maxLength = 256;
question1ProjectTitleInput.id="question1ProjectTitleInputID"
question1ProjectTitleDiv.append(question1ProjectTitle)
question1ProjectTitle.append(question1ProjectTitleName)
question1ProjectTitleDiv.append(question1ProjectTitleInput)
questions.append(question1ProjectTitleDiv) //Add project title
console.log(question1ProjectTitleInput) // Returns <input type="text" maxlength="256" id="question1ProjectTitleInputID">
JS CODE:
let question1ProjectTitleInputID = $("#question1ProjectTitleInputID").val(); //Jquery
let question1ProjectTitleInputID2 = document.getElementById('question1ProjectTitleInputID') //Vanilla JS

You have the following statement:
question1ProjectTitleInput.id="question1ProjectTitleInputID"
So, if you use jquery to read the input, you should
let question1ProjectTitleInputID = $("#question1ProjectTitleInputID").val(); //Jquery

Building a calculator using html JavaScript which takes values from two input tags and returns final answer on clicking submit button

Calculator which takes numbers written in input tag by users and then add them on clicking submit and shows result.
var numOne = document.getElementById("first");
var numTwo =
document.getElementById("second");
var submit = document.getElementById("submit");
var added = document.getElementById("answer");
submit.addEventListner( function(){
var one = numOne.value;
var two = numTwo.value;
added.innerHTML = one + two;
})
Please tell me the mistake

html
<input type="number" id="a">
<input type="number" id="b">
<input type="submit" id="submit">
<h1 id="answer"></h1>
Javascript
var submit = document.querySelector('#submit');
var answer = document.querySelector('#answer');
submit.addEventListener('click', () => {
var a = document.querySelector('#a').value;
var b = document.querySelector('#b').value;
answer.textContent = Number(a) + Number(b);
})
This is pretty straightforward but can be expanded upon to validate input properly and do other calculations.
Firstly, if you take a look at the html, you can see two number input fields and one submit button. Note that I have given them all IDs so that we can select them in our JS file. I have also provided an empty h1 element in which we will display the answer of our calculation.
In the JS file we are just listening for a click event on the submit button at which point, we capture the values entered into your input fields and add them together after coercing their type to numbers.
Finally, we return the sum of these values to the DOM as the textContent of the h1 element with id="answer"

print or show current value of variable in console.log

With the below; I am attempting to capture form field contents on click of submit button. However when I go to test it and console.log the variable I just get the HTML of the form field. Any pointers. Or I get uncaught reference error, the variable is not defined.
Mark-Up wise: I'm using input type text and input type radios.
$(document).ready(function(){
$('#submitS').click(function(){
var firstName01 = document.getElementById('firstName').value;
var firstName02 = document.getElementById('firstName2').value;
var lastName01 = document.getElementById('lastName').value;
var lastName02 = document.getElementById('lastName2').value;
var iphone01 = document.getElementById('iphone').value;
var android01 = document.getElementById('android').value;
var iphone02 = document.getElementById('iphone2').value;
var android02 = document.getElementById('android2').value;
});
});

Try using .textContent instead of .value

Get the tag name of a form input value

How does one get the .tagName of a value passed in an HTML form input? This is to check whether the value that has been passed is an 'iFrame'. The input is to only accept iframes
For example:
//HTML
<input type="text" id="iFrame">
<button id="butt">Push</button>
//JavaScript
document.getElementById("butt").onclick = function(){
var iframe = document.getElementById("iFrame").value;
console.log(iframe.tagName);
}

I think you are looking for
var iframe = document.getElementsByTagName("iFrame")

I perhaps did not ask the question in the best way, initially.
I wanted to check if the value passed in the input field was an "iframe" (the input is to only accept iFrames). Since .value returns a string and not an HTML tag, getting the tag name through basic methods would not work. I needed another way.
For anybody else who needs a quick solution, this is how I managed to do it:
document.getElementById("submit").onclick = function(){
var iframe = document.getElementById("iFrame").value;
var check1 = iframe.match(/iframe/g);
var check2 = iframe.match(/frameborder/g);
var check3 = iframe.match(/http:/g);
var check = check1.length + check2.length + check3.length;
if (check === 4) {
alert("good!");
}
}

How to assign value of textbox to another textbox in html?

I want to assign value of text box in another text box's value present in the immediate next line. How to do that using html and javascript?.
Eg:
input type = "text" name = "test" value = "pass">
input type = "hidden" name = "hiddentest" value = "(here i have to get the value of previous textbox)"/>
Please help me..

Assuming the two textboxes have IDs of "textbox1" and "textbox2", respectively:
var tb1 = document.getElementById('textbox1');
var tb2 = document.getElementById('textbox2');
tb1.value=tb2.value;

First, put a function into your page that will handle it:
<script language="JavaScript" type="text/javascript">
function setHiddenValue()
{
document.getElementById('txtHidden').value = document.getElementById('txtVisible').value;
}
</script>
Next, hookup the event on the visible textbox to call the function whenever the text changes:
<input type="text" onChange="javascript:setHiddenValue();"></input>

document.getElementById('hiddentest').value = document.getElementById('test').value ;