I'm trying to use JavaScript parameters in a function, but I'm not writing the syntax correctly.
This function is supposed to revert information in objects with the aa tag into whatever is specified with ba.
function myFunction(aa, ba){
document.getElementById(aa).innerHTML = ba;
}
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick="myFunction(demo, My First Javascript)">Click Me!</button>
Add single quotes around the inputs to your function:
Javascript:
function myFunction(aa, ba){
document.getElementById(aa).innerHTML = ba;
}
html:
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick="myFunction('demo', 'My First Javascript')">Click Me!</button>
here's a link to a codepen.io demo:
https://codepen.io/167141162/pen/Vrgvbg
Strings in JavaScript must be wrapped in either "" or ''. In your example, JavaScript will think that you are trying to pass a variable (or a function) called demo for the first argument, and the second one (My First Javascript) will throw a SyntaxError.
So, this will work:
function myFunction(aa, ba){
document.getElementById(aa).innerHTML = ba;
}
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick="myFunction('demo', 'My First Javascript')">Click Me!</button>
Wrap your string parameters in single quotes
<button type="button" onclick="myFunction('demo', 'My First Javascript')">Click Me!</button>
Your parameter << demo >> must be in single quotes, because in the js file the parameters take it as strings
<button type="button" onclick="myFunction('demo', 'My First Javascript')">Click Me!</button>
Related
<script>
function hello(val)
{
alert(val);
}
</script>
<button onclick="hello('hello')"">hello</p> <!-- works and prints hello -->
<button onclick={hello()}>hello 2</button> <!-- works and prints undefined -->
<button onclick={hello("hello3")}> hello 3</button> <!--also works even though intellisence put a squigly red line under the first quote "-->
<button onclick={hello("does not work")}> hello 3</button> <!-- does not work, error is show in console Invalid or unexpected token -->
I know that inline js should be treated carefully, im trying to explain that to other people with this example, however i dont what is happening underneath.
My explnation is that if you change something that is expected you would get undesired results, however i feel that my explanation is superficial and not enough, so could someone explain what is happening underneath that is casuing this wierd behaviour?
If it is only about HTML and no framework is involved, then what you observe is partially explained in HTML attribute with/without quotes
An attribute value can either be enclosed in " or ' or consist of a value that is not enclosed by quotes, and such a value must not contain spaces.
So <button onclick={hello()}>hello 2</button> it is equivalent to <button onclick="{hello()}">hello 2</button> and onclick has the value {hello()}, which is valid JS (the hello() is just within a block).
For <button onclick={hello("does not work")}> the value ends at the first space so it is equivalent to <button onclick="{hello("does" not="" work")}="">, there onclick has the value {hello("does and that's not valid JS.
Here is my code, I would like to know why does display() executes but show() doesn't. There must be a logic behind it right. Please enlighten me.
<html>
<head>
</head>
<body>
<button id="b1" onclick="show()">Show</button>
<p id="p1"></p>
<p id="p2"></p>
<body>
<script>
function show()
{
document.getElementById("p1").innerHTML="Hello";
}
document.getElementById("b1").onclick=display;
function display(){
document.getElementById("p2").innerHTML="World";
}
</script>
</html>
This would work if you have only one of the two. The problem is that the second bit of code will overwrite the onclick handler, which is why the first one is never called.
You could use addEventListener, which will not overwrite the existing listener(s), but add an extra one. That way, both will fire, although I think formally you can't be guaranteed of the order. In this particular scenario that shouldn't matter though.
function show()
{
document.getElementById("p1").innerHTML="Hello";
}
function display()
{
document.getElementById("p2").innerHTML="World";
}
document.getElementById("b1").addEventListener('click', display);
<button id="b1" onclick="show()">Show</button>
<p id="p1"></p>
<p id="p2"></p>
As mentioned in the comments, it's better to avoid inline JavaScript completely and get rid of the onclick attribute from your markup. But in some cases (maybe when you're stuck on WordPress or some other framework that relies on those inlined event handlers), you can't get rid of those. In that case, you can still use addEventListener as demonstrated to add your own event handler without interfering with the existing functionality.
For the same reason that:
document.querySelector("P").innerHTML = "Replaced";
<p>Original</p>
… shows "Replaced".
You overwrote the onclick function with a new one, completely replacing the old one.
Avoid onclick attributes and properties. Use addEventListener instead.
function show() {
document.getElementById("p1").innerHTML = "Hello";
}
function display() {
document.getElementById("p2").innerHTML = "World";
}
const b1 = document.getElementById("b1");
b1.addEventListener("click", show);
b1.addEventListener("click", display);
<button id="b1">Show</button>
<p id="p1"></p>
<p id="p2"></p>
onclick property of the EventHandler is for processing click events on a given element.
for onclick event ,you have assigned new function object through
document.getElementById("b1").onclick=display;
Only one onclick handler can be assigned to an object at a time
<body>
<button id="b1" onclick="show()">Show</button>
<p id="p1"></p>
<p id="p2"></p>
<body>
<script>
function show()
{
document.getElementById("p1").innerHTML="Hello";
}
document.getElementById("b1").onclick=display;
function display(){
document.getElementById("p2").innerHTML="World";
}
</script>
You can only bind onclick with one method either display or show
I want to apply text "<b>H</b>ell<b>o</b>" to the paragraph with id="predogled" using javascript, so the output will be Hello.
I tried with this:
<script>
function formattext(){
document.getElementById('predogled').innerText="<b>H</b>ell<b>o</b>";
}
</script>
<p id="predogled"></p>
<button type="button" onclick="formattext()">Format!</button>
But this code literally print "<b>H</b>ell<b>o</b>" and the characters are not bold as I want.
That's what innerText does. If you want it to be interpreted as HTML, use innerHTML instead.
you have to use innerHTML
<script>
function formattext(){
document.getElementById('predogled').innerHTML="<b>H</b>ell<b>o</b>";
}
</script>
<p id="predogled"></p>
<button type="button" onclick="formattext()">Format!</button>
With innerText you print a string.
With innerHTML you print the HTML content of the elements.
Try using innerHTML besides innerText:
function formattext(){
document.getElementById('predogled').innerHTML="<b>H</b>ell<b>o</b>";
}
So I've just began learning JavaScript and I wanted to change the text in my paragraph when the button is clicked but it's not working for some reason
<body>
<p id="paragraph">Change Text on click</p>
<button onclick="dosomething">
You already know
</button>
</body>
this is the HTML code and below is the JS
function dosomething(){
document.getElementById('paragraph').innerHTML = 'Button was clicked!';
}
this is all that's in the JS file so unless I'm missing something this is it. I did correctly script the js file in the html head too
Call your function like dosomething() with the parenthesis:
function dosomething(){
document.getElementById('yeezy').innerHTML = 'Tottenham';
}
<p id="yeezy">What do we think of stuff</p>
<button onclick="dosomething()">
You already know
</button>
My question is rather elementary, but I do not understand why, in the following code, on button click only button dissapears, instead of the whole div:
<script>
function remove(id) {
//get the element node
element = document.getElementById(id);
//remove the element from the document
document.removeChild(element);
}
</script>
<div id="intro" class="jumbotron">
<h1>Your Offline Web Dictionary!</h1>
<p class="lead">
<div class="controls">
<input class="span7 " type="text" placeholder=" " name="key">
</div>
<div>
<button class="btn btn-large btn-success" onclick="remove(intro)">
Dictionary Search
</button>
</div>
</div>
JSFiddle
The problem is that the button element has a remove property so that is called instead of your remove function. And also the string thing.
<button class="btn btn-large btn-success" onclick="window.remove('intro');console.log(this.remove);">
Search
</button>
http://jsfiddle.net/HMEVd/76/
Two problems. Firstly, intro should be a string, not an identifier, so use remove('intro') in your onclick.
Second, document.rwmoveChild is incorrect. removeChild should be called on the parent of the element you are removing. It is common to use:
element.parentNode.removeChild(element);
intro should be sent to the function as a string rather than a variable, i.e, 'intro'
Also, you must rename your function, for example, removeById instead of remove. Then it works perfectly.
The function remove actually does something completely different. (Your function is not even invoked when it is named remove as you can see by putting an alert message into it.)
function removeById(id) {
//get the element node
element = document.getElementById(id);
//remove the element from the document
document.removeChild(element);
}
...
<button class="btn btn-large btn-success" onclick="removeById('intro')">