I am trying to make text change to different text when a button is pressed and I'm not sure why it's not working.
<p id="test"> A </p>
<button onclick = "test()"> Click </button>
<script>
function test(){
document.getElementById("test").innerHTML = "B";
}
</script>
Use innerText insteadof innerHTML like this:
<p id="test"> A </p>
<button onclick = "test()"> Click </button>
<script>
function test(){
document.getElementById("test").innerText = "B";
}
</script>
const button = document.querySelector('.test__button');
button.addEventListener("click", test)
function test() {
document.getElementById("test").innerHTML = "B";
}
<p id="test"> A </p>
<button class="test__button"> Click </button>
Related
I want to start checking if you click on an image, but only after you click on a button.
Before the button is clicked, nothing should happen when you click on the image.
This is my code:
<body>
<div class="wrap" id="myImgId">
{{-- <div class="draggable"></div> --}}
</div>
<button class="btn btn-primary" onclick="buttonClicked()">Click me</button>
<script type="text/javascript">
function buttonClicked(){
var myImg = document.getElementById("myImgId");
myImg.onmousedown = GetCoordinates;
};
</script>
</body>
How do I do this?
You can declare a variable with false value as flag, clicking on button you can set that to true which you can check when the image is clicked.
Demo:
let clikedButton = false;
function buttonClicked(){
clikedButton = true;
var myImg = document.getElementById("myImgId");
//myImg.onmousedown = GetCoordinates;
};
document.querySelector('#myImgId').addEventListener('click', function(){
if(clikedButton) {
alert('clicked after the button');
clikedButton = false;
}
});
<div class="wrap" id="myImgId">
Some Image
</div>
<button class="btn btn-primary" onclick="buttonClicked()">Click me</button>
i am trying to use JavaScript where i can click on a button and it will generate a button above it so for example i have the first button called add additional:
<a href"#"><button type="button">Add Additional</button></a>
When this button is clicked and it will generate another button where i want it to be displayed the below:
<td>
Name
</td>
<td>
<button type="button">Choose another thing</button>
</td>
and is it possible to repeat this process like generating more of the 2nd button "Choose Another thing"
i hope this ins't too confusing
I think you are looking for something like this!! Just add a script so that whenever you click on the button it will execute it and create more buttons.
<!DOCTYPE html>
<html>
<body>
<p>Click the "Add Additional" button to create a BUTTON element with a "Choose Another Thing" text.</p>
<button onclick="myFunction()" type="button">Add Additional</button>
<script>
function myFunction() {
var x = document.createElement("BUTTON");
var t = document.createTextNode("Choose another thing");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
</body>
</html>
I think this is the elegant way.
function appendButton(textContent, selector) {
var button = document.createElement('button');
button.classList.add('any');
button.innerHTML = textContent;
var selectedElement = document.querySelector(selector);
return selectedElement.appendChild(button);
}
// Call this function from wherever u like
// appendButton('click here', '.container');
<div class="container">
<button onclick="appendButton('click here', '.container')">
Click me
</button>
</div>
Run this you will get your solution
<html>
<head>
<script type="text/javascript">
function myFunction()
{
var a=document.createElement("a");
a.setAttribute("href","secondpage.html");
var btn=document.createElement("BUTTON");
var text=document.createTextNode("Choose another thing");
btn.appendChild(text);
a.appendChild(btn);
document.body.appendChild(a);
}
</script>
</head>
<body>
<a href"#"><button type="button" onclick="myFunction()">Add
Additional</button></a>
</body>
</html>
Give an id/class for a division append to it.
<div id='my_id' >
<td>Name</td>
<td><button>click</button></td>
</div>
When you click on addMore button write a function to append it to my_id
function onclickforaddbutton(){
id = document.getElementById('my_id');
var data = prompt("Enter something"); //where you can get data from user
id.innerHTML+="<td>"+data+"</td><td><button>Something</button></td>";
}
You need to first decide (container) where to add a new row. Then on click of add button, you can create a row with two columns, for the name and the new button, and append that row as a child of the container.
Here's how you can do it.
var count = 1;
var name = 'Generated Name';
function addNewRow() {
var container = document.getElementById('container');
var newRow = document.createElement('tr');
newRow.innerHTML = "<td>" + name + (count++) + "</td><td><button>Choose another thing</button></td>"
container.appendChild(newRow);
}
<html>
<head></head>
<body>
<div style="padding: 2rem;">
<table id="container">
</table>
</div>
<button onclick="addNewRow();">Add Additional</button>
</body>
</html>
<button onclick="myFunction()">Set demo1</button>
<button onclick="myFunction()">Set demo2</button>
<button onclick="myFunction()">Set demo3</button>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
This is the markup I have. I am trying to use just one function to update the <p> tags individually.
Example Scenario: Clicking Set demo1 button will only update the <p> which has id="demo1" but with only one function.
Help would be very much appreciated.
You can use following approach. Clicking on each button will affect corresponding p element.
var elems = document.getElementsByClassName('btn');
Array.from(elems).forEach(v => v.addEventListener('click', function(){
var index = this.innerHTML.match(/\d+/)[0];
var elem = document.getElementById('demo'+index);
// logic
elem.style.color = 'red'; // just an example
}));
<button class='btn'>Set demo1</button>
<button class='btn'>Set demo2</button>
<button class='btn'>Set demo3</button>
<p id="demo1">1</p>
<p id="demo2">2</p>
<p id="demo3">3</p>
If you change your markup slightly so that each button has a data-target attribute, then it can be easily done.
HTML:
<button onclick="myFunction()" data-target="#demo1">Set demo1</button>
<button onclick="myFunction()" data-target="#demo2">Set demo2</button>
<button onclick="myFunction()" data-target="#demo3">Set demo3</button>
JS
function myFunction() {
var pTag = document.getElementById(this.getAttribute('data-target'));
pTag.textContent = "Hello world"; // whatever you would like
}
What code would I need to embed a given text in the text area of a mail form by clicking on a button which is on another page of the same site? I've tried the following to no avail (where am I making the mistake?):
<button type="button" onclick="myFunction()">Submit request</button>
<p id="request"></p>
<script>
function myFunction() {
document.getElementById("request").textarea.kontakt.html = "My text.";
}
</script>
Use document.getElementById("id-of-the-textarea").value = "My text.";
Note : Your above code should be :
<button type="button" onclick="myFunction()">Submit request</button>
<p id="request"></p>
<script>
function myFunction() {
document.getElementById("request").innerHTML = "My text.";
}
</script>
I'm trying to make a button that shows text and another that removes it, this is what I have done so far.
When i click the Click me! button text shows, but it won't disappear when i click the hide button and i don't know why.
<div class="butt">
<button type="button" onclick="myFunction()">Click Me!</button>
<button type="button" onclick="myFunctionHide">Hide</button>
</div>
<p id="test"></p>
<script = "text/javascript">
function myFunction() {
document.getElementById("test").innerHTML = "Andyduly";
}
</script>
<script = "text/javascript">
function myFunctionHide {
document.getElementById("test").innerHTML.object.style.display == "none";
}
</script>
2 issues in your code
<button type="button" onclick="myFunctionHide">Hide</button>
should be
<button type="button" onclick="myFunctionHide()">Hide</button>
function myFunctionHide {
document.getElementById("test").innerHTML.object.style.display == "none";
}
should be
function myFunctionHide() {
document.getElementById("test").style.display = "none";
}
style is property of the element and not the innerHTML.object
Also it is a better idea to avoid inline event handlers, which keeps your HTML cleaner also adhering to separation of concerns which makes your code more maintainable.
HTML
<div class="butt">
<button type="button" id="btn_click">Click Me!</button>
<button type="button" id="btn_hide">Hide</button>
</div>
<p id="test"></p>
JS
var elemTest = document.getElementById('test');
document.getElementById('btn_click').addEventListener('click', function () {
elemTest.innerHTML = "Andyduly";
});
document.getElementById('btn_hide').addEventListener('click', function () {
elemTest.style.display = "none";
});
You can encase your whole code inside a single script tag.
Check Fiddle
See this fiddle
To hide an element using Javscript, try something like
document.getElementById('test').style.display = 'none';
So replace your <script> as below
<script = "text/javascript">
function myFunctionHide() {
document.getElementById("test").style.display = 'none';
}
</script>
There are many errors in your Javascript and HTML
Edited Javascript
function myFunction() {
document.getElementById("test").innerHTML = "Andyduly";
}
function myFunctionHide() {
document.getElementById("test").style.display = "none";
}
You forgot to add () to your myFunctionHide in your Javascript.
Also, the edited HTML would be
<div class="butt">
<button type="button" onclick="myFunction()">Click Me!</button>
<button type="button" onclick="myFunctionHide()">Hide</button>
</div>
<p id="test"></p>
Well, first of all you syntax doesn't look right, should be
function myFunctionHide() {
document.getElementById('test').style.display = 'none';
}
Try this one, I'm clearing the text from "test" P tag.
<div class="butt">
<button type="button" onclick="myFunction()">Click Me!</button>
<button type="button" onclick="myFunctionHide()">Hide</button>
</div>
<p id="test"></p>
<script = "text/javascript">
function myFunction() {
document.getElementById("test").innerHTML = "Andyduly";
}
</script>
<script = "text/javascript">
function myFunctionHide() {
document.getElementById("test").innerHTML = "";
}
</script>