in this example, i have a button which has to change the text. Now I know that I can use the onclick=document.getElementById('id').innerHTML="text" but I am making a function such that
**onclick = myFunc()**
<script>
function myFunc()
var x = document.getElementById('id');
x.style.property = 'text';
</script>
so my question is , is there any property I can use which will change the text
No. "Style" properties are for styling. With a few very specific exceptions, they are only for changing the look of the content. Not changing the content itself.
There are other alternatives to innerHTML. innerHTML is for adding HTML content to the element.
One alternative is textContent. Which adds plain text to the element.
var x = document.getElementById('foo');
x.textContent = 'text';<button id="foo">Hello World</button>You can set text using :
<script>
function myFunc(){
var x = document.getElementById('btntext');
x.style.color = "green";
x.style.fontSize = "large";
x.value = "This is new TExt";
}
</script>
<body>
<input type="text" id="btntext" value="This test"/>
<button onClick="myFunc()" name="send">change color</button>
</body>
function changeText(id) {
id.innerHTML = "Text has been changed!";
}<h1 onclick="changeText(this)">Click on this text!</h1>
innerHTMLwhy won't you use it?textContentproperty rather thaninnerHTML, but there's no CSS property available to JavaScript that can change the text of an element. Although you could use thecontentCSS property on generated elements which, so far as I know, are read-only to JavaScript. And even then will only read the original string, not the computed value (in the event of usingattr()orcounter()to set the value.