Question 194917 in Html Question posted in
Some basic documentation can be found here.

Html – function input access in javascript

I want get input from html file and use the value in my JavaScript function, but I don’t know what the problem is.

I cant access my input because when I run my code I get this:

hi  hiii

let name = document.getElementById("fname").value

function ShowMessage() {
  document.write(" hi " + fname + " how are you? ");
}
<!DOCTYPE html>
<html>

<body>
  <form>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
  </form>
  <button onclick="ShowMessage()">click</button><br><br>

</body>

</html>
Tags:

5

Answers


  1. Chosen as BEST ANSWER
    0

    i add this part to my code:

    let input = document.getElementById("fname"); document.getElementById("btn").addEventListener("click", function () { document.getElementById("output").textContent = ShowMessage(input.value);});


  2. 0

    Write your function like this.

    function ShowMessage( ){
let name= document.getElementById("fname").value
 document.write(" hi " + name + " how are you? ");
}

    Hope it will help you.

    Login or Signup to reply.
  3. 0

    Here is how I would do it with a much cleaner solution. I would add a class the button ".btn", and create an empty paragraph with a class "contents":

    const button = document.querySelector('.btn')
const contents = document.querySelector('.contents');
const nameEl = document.getElementById("fname");

function showMessage() {
  let name = nameEl.value;
  contents.textContent = " hi " + name + " how are you? ";
}

button.addEventListener('click', showMessage)
    <!DOCTYPE html>

<body>
  <form>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
  </form>
  <button class="btn">click</button><br><br>
  <p class="contents"></p>
</body>

</html>
    Login or Signup to reply.
  4. 0
    • get the input’s value inside the function
    • don’t use document.write – use Element.textContent instead
    • avoid the use of HTML inline on* attribute handlers, use Element.addEventListener() instead
    • make sure the input is not spaces by using .trim() and an if statement
    • you don’t need a <form> – if you don’t need to submit the form
    • read about template literals
    const elApp = document.querySelector("#app");
const elName = document.querySelector("#fname");
const elShow = document.querySelector("#show");
const elOutput = document.querySelector("#output");

function showMessage() {
  const name = elName.value.trim();
  if (name) {
    elOutput.textContent = `Hi ${name}, how are you?`;
    elName.value = ""; // clear input value
  }
}

elShow.addEventListener("click", showMessage);
    <div id="app">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname">
  <button type="button" id="show">click</button>
  
  <div id="output"></div>
</div>
    Login or Signup to reply.
  5. 0

    your function:

    let name= document.getElementById("fname").value
function ShowMessage( ){
 document.write(" hi " + fname + " how are you? ");
}

    Change to:

    let name= document.getElementById("fname").value
function ShowMessage( ){
 document.write(" hi " + name+ " how are you? ");
}

    This is typing mistake or you are referring to the wrong variable. Hope that helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search