innerHTML not displaying text

StackOverflow https://stackoverflow.com/questions/23527801

  •  17-07-2023
  •  | 
  •  

문제

Please excuse my basic query to javascript and html

I am new to javascript and html. I am trying to work with javascript on click and few other things. In below code, am trying to display a text on "onclick" function. I am using an external javascript.

    <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" >
        <script type="text/javascript" src="/home/roger/Documents/html/myScript.js"></script>
    </head>
  <body>


    <form>
      First Name: <input type="text" name="first" id="names"/><br>
      Phone Number: <input type="number" name="numb" id="numb"/><br>  
      <button type="button" onclick="verifyText()">Click Me!</button> 
    </form>
  </body>
</html>

Below is my code in myScript.js

function verifyText(){

    document.getElementById("names").innerHTML = "Why not displaying?.";

}

If I put alert in function, pop comes out, but I am unable to figure why innerHTML is not working. Any help will be highly appreciated. Thanks.

도움이 되었습니까?

해결책 3

Use the javascript element.setAttribute('[attr]','string') to save the user input values or input checkbox checks as part of the document innerHTML. The reset() function changes the form input back to its current Attribute setting. Javascript can dynamically change the default input value with the setAttribute therefore, change the user input default value when reset() is clicked or your code reloads it as part of a saved innerHTML.

function update_attribute() {
  var obj = document.getElementById('demo');

  if (obj.type == 'checkbox') {
    if (obj.checked == true) {
      obj.setAttribute('checked', 'checked');
    } else {
      obj.removeAttribute('checked');
    }
  }

  if (obj.type == 'text') {
    obj.setAttribute('value', obj.value);
  }

}
<form id='myform'>

  <label>Text Input</label><br>
  <input type='text' id='demo'>

  <br>
  <br>
  <button type='button' onclick='update_attribute(this)'>Change Attribute</button>
  <button type='reset'>RESET</button>

</form>

다른 팁

You need to set the value, because names is an input field.

document.getElementById("names").value = "Why not displaying?.";

See: http://jsfiddle.net/zrmrx/

names is an <input>. You need to set its value, instead of innerHTML. Try this:

function verifyText(){
    document.getElementById("names").value = "Must display now!";
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top