How to get the 's value?

Question

How do I get the <input>'s Value

1. I'm trying to make a page viewer through the iframe, so. I have searched up some things to help. But nothing has correctly done something to help. I've tried

Codes I used that didn't work.

Found on W3Docs, I used this portion of a code...

function getInputValue() {
  // Selecting the input element and get its value 
  let inputVal = document.getElementsByClassName("inputClass")[0].value;
  // Displaying the value
  alert(inputVal);
}

<input type="text" placeholder="Type " id="inputId" class="inputClass">
<button type="button" onclick="getInputValue();">Get Value</button>

It didn't properly alert the value of the input.

I also tried this, its supposed to have a variable inside of a function that I can simply put inside a button's onclick

var input = document.getElementById("input_id").value;

this also failed in return. nothing happened when I put it inside of a button.

Additional

Is there any source I can find things like this?

Answer 1

Like @Kinglish said, you made a typo when using getElementById.

 <input type="text" placeholder="Type " id="inputId" class="inputClass">
<button type="button" onclick="getInputValue();">Get Value</button>
<script>
  function getInputValue() {
    let inputVal = document.getElementById("inputId").value;
    alert(inputVal);
  }
</script>

It should be "inputId", not "input_id".

Answer 2

The best way to get the value of an input is by making a form:

    <form class="my-form">
        <input type="text" placeholder="Type " name="my-input">
        <button>Get Value</button>
    </form>

    <script>
        let form = document.querySelector(".my-form");

        form.addEventListener("submit", function (e) {
        e.preventDefault() // This prevents the window from reloading
        
        let formdata = new FormData(this);
        let input = formdata.get("my-input");

        alert(input);
        });
    </script>

That's the best way of geting data from inputs. You simply put the values of the form with new FormData(), and then you get the input values with formdata.get("input_name")

Answer 3

I dont get why there is a '[0]' in between the objects..maybe this can help you. Declare the variable first and then use it.

<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>

function myFunction() {
  var x;
  x = document.getElementById("numb").value;
}