not able to change element on click in javascript - javascript

New to Javascript. Tried text type javascript also. Not worked. I doing this piece of code in notepad++ using html as extension and implementing on mozilla.
<html>
<head></head>
<body>
<h1>JavaScript in Body</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHtml = "Paragraph changed";
}
</script>
</body>
</html>

myFunction is trying to call innerHtml but it should be innerHTML (HTML is capitalised).
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed";
}

You need to capitalize the .innerHTML: https://jsfiddle.net/1e091yo2/
function myFunction(){
document.getElementById("demo").innerHTML = 'See, I told you.'
}

Check this working code.
function myFunction() {
document.getElementById("demo").innerHTML= "Paragraph changed";
}
<h1>JavaScript in Body</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>

Related

How to get anchor tag text to a variable and display as innerHTML?

I have given code below. I want that a variable of JS take anchor tag text as input and display in another Element through innerHTML.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p><a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com</a>
<a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com</a></p>
<p>Click the button to change the value of the href attribute of the link above to "www.cnn.com".</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var x=$(".myAnchor").on("click",function(event){
event.preventDefault();
$(this).text();
});
function myFunction() {
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
What you are doing wrong?
Instead of assigning the click event to a variable, assign the inner text of the clicked link in a variable and on clicking the button assign this variable to the required element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p>
<a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com1</a>
<a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com2</a>
</p>
<p>
Click the button to change the value of the href attribute of the link
above to "www.cnn.com".
</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var x = '';
$(".myAnchor").on("click", function(event) {
event.preventDefault();
x = $(this).text();
});
function myFunction() {
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

Adding an onclick event to a button with a button that has an onclick event?

I have 2 buttons, one has an onclick event that when clicked calls a function that is supposed to add an onclick event handler to the second button.
I was able to do this little example in w3schools.com, here is the code:
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn2" onclick="addfunc();">Trigger</button>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
function addfunc(){
document.getElementById("myBtn").onclick = displayDate();
}
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
The intended function is that when clicking "Try it" button before "Trigger", nothing happens, and only after clicking "Trigger" the "Try it" button should work. Problem is when I click "Trigger" it actually runs the function that it is supposed to be executed by the click of "Try it" button.
Hope I explained myself, thanks!
You should use displayDate instead of displayDate(). Because displayDate() directly calls the function.
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn2" onclick="addfunc();">Trigger</button>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
function addfunc(){
document.getElementById("myBtn").onclick = displayDate;
}
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
If you want to pass variables
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn2" onclick="addfunc();">Trigger</button>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
function addfunc(){
document.getElementById("myBtn").addEventListener('click', function(){
displayDate("my params");
});
}
function displayDate(params) {
document.getElementById("demo").innerHTML = Date() + " -- " + params;
}
</script>
</body>
</html>
You can disable the second button (in HTML code) and make a first button an activator of btn1
<body>
<main>
<input class="btn1" type="button" value="enable button 2" name="btn1" onclick="ableBtn2()">
<button Id="btn2" onclick="displayDate()" disabled="true">button 2</button>
<p id="test"></p>
<script type="text/javascript">
function ableBtn2() {
document.getElementById("btn2").disabled = false;
}
</script>
<script type="text/javascript">
function displayDate() {
document.getElementById("test").innerHTML = Date();
}
</script>
</main>
</body>

JavaScript: getElementById does not return the width of a button

Why does the alert window not show the button's width here? I looked through similar questions, but it looks like my question is too simple to have an answer there.
<!DOCTYPE html>
<html>
<body>
<button id="jock" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
alert(document.getElementById("jock").style.width);
}
</script>
</body>
</html>
Use offsetWidth instead of style width. This will get the elements true width value.
<!DOCTYPE html>
<html>
<body>
<button id="jock" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert(document.getElementById("jock").offsetWidth);
}
</script>
</body>
</html>
There is no style attribute declared in the element. So document.getElementById("jock").style.width may not work,
But getComputedStyle can be used the get the width of the button in the window.
function myFunction() {
var elem1 = document.getElementById("jock")
var style = window.getComputedStyle(elem1, null);
console.log(style.width)
}
<button id="jock" onclick="myFunction()"> Try it
</button>

document.body.appendChild() not working with <form>

I am running the code from w3schools to add button dynamically to the page. Here is the code.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to make a BUTTON element with text.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var btn = document.createElement("BUTTON");
var t = document.createTextNode("CLICK ME");
btn.appendChild(t);
document.body.appendChild(btn);
}
</script>
</body>
</html>
But this dynamic addition doesn't work when I have a <form> tag. What changes in the JavaScript I can make to accommodate dynamic button without having to remove the <form> tag?
function myFunction() {
var btn = document.createElement("BUTTON");
var t = document.createTextNode("CLICK ME");
btn.appendChild(t);
document.getElementById('theForm').appendChild(btn);
}
</script>
<p>Click the button to make a BUTTON element with text.</p>
<button onclick="myFunction()">Try it</button>
<form id="theForm">
</form>

JavaScript function passing value not working properly

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction(demox)">Click me</button>
<p id="demo"></p>
<p id="demox"></p>
<script>
function myFunction(cat) {
var dog = document.getElementById( cat);
dog.innerHTML = "Hello World";
}
</script>
</body>
</html>
I am trying to pass an id value of "demox" to a js function to display some text with an onclick event, but it doesn't seem to work. what is the problem here?
You can find script modified which solve your issue here.
https://jsbin.com/yitovikete/edit?html,output
Generally, I would suggest you to add <script> tag within the header of your HTML page like this:
https://jsbin.com/yitovikete/1/edit?html,output
This is good when you need to do something while the body is loading, or want to maybe make some ajax requests.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction('demox')">Click me</button>
<p id="demo"></p>
<p id="demox"></p>
<script>
function myFunction(cat) {
var dog = document.getElementById( cat);
dog.innerHTML = "Hello World";
}
</script>
</body>
</html>

Categories