I got a problem with one of the sites with JavaScript, and I need to automate a click and then find out how many turns I got before I run out of them. As in, for example, let's say I have 8 turns. So what I would need is to automatically have JavaScript to trigger said div id, 8 times. (As in, I add like this)
Link:https://jsfiddle.net/yxsgp8tc/
<body>
<button id="test">Test</button>
<p>
On box should be number of tests
</p>
<form>
<label><input type="text"/>00-99</label>
<button>
trigger it
</button>
</form>
</body>
in plain javascript, you would target unique elements (using an id) by using document.getElementById('<element_id'). If you wanted to target a class, you would document.querySelector('.<class_name>') for the first instance of the class, or document.querySeletorAll('.<class_name>')
Also, your input tag was misspelled "imput", and is a singleton tag so you don't have to close it off.
Assuming you wanted a way to trigger a click event, here's a basic example:
<head>
<script>
const test = document.getElementById('test');
const trigger = document.getElementById('trigger')''
test.addEventListener('click', () => {
const num_test = document.getElementById('num_tests').value;
for (let i = 0; i < num_test; i++) {
trigger.click();
}
});
trigger.addEventListener('click', () => {
console.log('trigger clicked');
});
</script>
</head>
<body>
<button id="test">Test</button>
<p>
On box should be number of tests
</p>
<form>
<input type="text" id="num_tests" value="">
<button id="trigger">
trigger it
</button>
</form>
</body>
https://jsfiddle.net/qr1z3d6e/2/
first in the jsfiddle.net link there are some errors such as imput instead of input.
I haven't tested it, but if I understand correctly is it something like this? try it.
<body>
<input id="myinput" type="text">00-99</input>
<button id="clickme">
</body>
<script>
var button = document.getElementById("clickme"),
count = 99;
var myInput = document.getElementById("myinput")
button.onclick = function(count){
count -= 1;
myInput.innerHTML = "00 " + count;
};
</script>
Related
This question already has answers here:
Increment a number inside a div?
(4 answers)
Closed 3 years ago.
I am creating buttons on click I would like to increment button text on every time a user creates a new button
HTML
<button id="btn">Add button</button>
<div id="movie-block">
</div>
$("#btn").on("click", function(){
var newMovieBlockButton = $("<div class='movie-button w'>Button1<div>");
$("#movieblock" + movieid).append(newMovieBlockButton);
})
I want when user click add button new button should be created starting with eg
button1, if he creates another button it should be button2 etc etc
How can I accomplish that using jquery?
In each click, you can take the length of the button with class movie-button and concatenate that with the text:
$("#btn").on("click", function(){
var len = $('.movie-button').length + 1;
var newMovieBlockButton = $("<div class='movie-button w'>Button"+ len +"<div>");
$("#movie-block").append(newMovieBlockButton);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id="btn">Add button</button>
<div id="movie-block">
</div>
A quick google search would have helped.
<button id="btn">Add button</button>
<div id="movie-block">
</div>
let counter = 1;
$("#btn").on("click", function(){
var newMovieBlockButton = $(`<div class='movie-button w'>Button${counter}<div>`);
$("#movieblock" + movieid).append(newMovieBlockButton);
counter++;
})
<!DOCTYPE html>
<html>
<body>
<button onclick="append()">Try it</button>
<div id="myDIV">
New Paragraphs will add on this div
</div>
<script>
function append() {
var para = document.createElement("P");
para.innerHTML = "This is a paragraph.";
document.getElementById("myDIV").appendChild(para);
}
</script>
</body>
</html>
Hope this will help
I'm trying to hide a part of every user email, registered in a website.
So lets say I have get zero#example.com and I want to hide everything after the "#". And only show it if someone clicks on whats left of the email.
Any help would be appreciated.
This just hides everything.
<p>
<button onclick=".hide('#email')">Hide</button>
<button onclick=".show('#email')">Show</button>
</p>
<div id="email">
<h2>zero#example.com<h2>
</div>
Try following:
<script type="text/javascript">
function show(){
document.getElementById('trail').style.display = 'inline';
}
function hide(){
document.getElementById('trail').style.display = 'none';
}
</script>
<p>
<button onclick="hide()">Hide</button>
<button onclick="show()">Show</button>
</p>
<div id="email">
<h2>zero<span id="trail">#something.com</span></h2>
</div>
You can use split ( => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split ) if you know what character to expect. In this case:
var full; // let's say, it already has a value (f.e. zero#something.com)
var visiblePart = full.split("#")[0];
and eventually you can do something like this on click:
function show(){
document.getElementById("emailH2").innerHTML = full;
}
function hide(){
document.getElementById("emailH2").innerHTML = visiblePart;
}
and
<h2 id = "emailH2">zero#something.com<h2>
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>
I'm really confused on how to go about this.
What I'm trying to do is, have a form in HTML (not <form>), just a bunch of <input> tags with a <button>.
Basically, in the javascript code, there's an event listener that activates the MakeCard() method, when the <button> is pressed.
The MakeCard() method is supposed to then replace the form (in the HTML body) with a <div> that has it's own random stuff.
How do I make this system work? Please no JQuery and other such libraries. I'm only allowed to use DOM.
This is the code I have so far:
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<script>
window.addEventListener("load", function(){
var nameOfRecipient = document.getElementById("nameOfRecipient");
var colorInfo = document.getElementById("colorInformation");
var fontSize = document.getElementById("fontSize");
var resultNameOfRecipient = document.getElementById("resultNameOfRecipient");
var resultColorInfo = document.getElementById("resultColorInformation");
var resultFontSize = document.getElementById("resultFontSize");
function MakeCard(){
// Make the card
// Show the results
ShowResults();
}
function ShowResults(){
// Show the user choices
resultNameOfRecipient.innerHTML = nameOfRecipient.value;
resultColorInfo.innerHTML = colorInfo.value;
resultFontSize.innerHTML = fontSize.value;
}
document.getElementById("submitButton").addEventListener("click", MakeCard);
});
</script>
</head>
<body>
<div id="headerContainer">
Welcome to the Card Maker!
</div>
<div id="formContainer">
<p>Name of recipient<input type="text" id="nameOfRecipient"></p>
<p>Color Information<input type="text" id="colorInformation"></p>
<p>Font Size<input type="number" id="fontSize"></p>
<input type="button" id="submitButton" value="Make Card!">
</div>
<div id="resultContainer">
<p id="resultNameOfRecipient"></p>
<p id="resultColorInformation"></p>
<p id="resultFontSize"></p>
</div>
</body>
PLEASE IGNORE THE LAST DIV WITH ID="resultContainer" and ignore all the variables that have the result in front. That stuff is other extra stuff.
It would be amazing if I could just know how to make an entirely new div that REPLACES the div with ID="formContainer".
First things first: Why use listeners when you can use onclick tags? Set the button like this, and change the listener to a dedicated function:
window.addEventListener("load", function(){
becomes
function myfunction() {
and don't forget to change the end of the script from }); to }..
Also, remove the listener from the button, which is this line.
document.getElementById("submitButton").addEventListener("click", MakeCard);
And add an onclick event to the button, and change it to a button type, to make sure it doesn't submit:
<button type="button" id="submitButton" onclick="myfunction()">Make Card!</button>
Secondly: You've set variables to actual HTML elements, which would show something like: HTML[buttonElement]... I'm assuming what you want is what was typed in the element, which is the "value" tag. You would get that by changing the variables to this:
var nameOfRecipient = document.getElementById("nameOfRecipient").value;
var colorInfo = document.getElementById("colorInformation").value;
var fontSize = document.getElementById("fontSize").value;
var resultNameOfRecipient = document.getElementById("resultNameOfRecipient").value;
var resultColorInfo = document.getElementById("resultColorInformation").value;
var resultFontSize = document.getElementById("resultFontSize").value;
So now that we've tidy'd up your syntax and stuff, I wanna get on to the part where you said you wanted to replace the DIV. Here's my way of doing it:
I would give every element in the DIV an ID (other than the button, we've already discussed that).
<p id="nameofrecipentp">Name of recipient<input type="text" id="nameOfRecipient"></p>
<p id="colorinformationp">Color Information<input type="text" id="colorInformation"></p>
<p id="fontsizep">Font Size<input type="number" id="fontSize"></p>
You could then call a function when the function myfunction() is called.
function myfunction() {
replacediv()
And define replacediv() to replace all the elements in the form to whatever you'd like.
function replacediv() {
document.getElementById("nameofrecipentp").innerHTML =
"Enter your data here"
document.getElementById("colorinformationp").innerHTML =
"Enter your data here, for the color information"
document.getElementById("fontsizep").innerHTML =
"enter your data here for font size"
}
I think I pretty much covered everything. If you still need help, tell me.
my page is full of php-generated content split in div's that have the same class but no id's. I want to show some buttons that allow me to manage, change and delete the div's; the buttons should be able to change the class, delete the div and select the content of the div.
How can I do this? is there a way to set the button's onclick action to something, say ... onclick="changetheclass(this)" that would actually change the class of the div containing this button?
Man I feel I'm not making any sense here :(
Did anyone understand what I'm talking about? If so, is there any possibility to do this?
Thanks in advance!
:)
EDIT: this is one of the divs, so that you could understand what I'm talking about:
<div class="box"><p>
this is the content of the div
<button onclick="change_the_class(this_div_or_something)">click here to change the class of the div</a>
<button onclick="select_the_content(this_div_or_something)">click here to change the class of the div</a>
<button onclick="delete_the_whole_div(this_div_or_something)">click here to change the class of the div</a>
</p></div>
Is this what you looking for ??
<html>
<head>
<script type="text/javascript">
function changeClass(elm) {
elm.parentNode.className ='newcss';
}
function deleteDiv(elm) {
var par = elm.parentNode;
var gran = par.parentNode;
gran.removeChild(par);
}
</script>
</head>
<body>
<div class='test'>
Hello
<button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
<button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
</div>
<div class='test'>
Hello
<button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
<button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
</div>
<div class='test'>
Hello
<button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
<button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
</div>
<div class='test'>
Hello
<button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
<button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
</div>
</body>
</html>
in JS, you can use querySelectorAll:
//get all divs with class "myDiv"
var divs = document.querySelectorAll('div.myDiv');
//for each of the gathered divs, do something with it
for(var i=0; i< divs.length;i++){
var aDiv = divs[i];
//"aDiv" is a div in the collection of matched divs
//you can do anything with it: add buttons etc.
}
First stay away from onclick="something" - inline JavaScript. then yes you can still manage to do what you want to do without ids.
var divs = document.getElementsByTagName('div'),
result = [],
len = divs.length,
i = 0,
aLink;
for(; i < len; i++){
// update the condition if there can be more than one class name as this assume a single class name
if (divs[i].className == 'myClassName') result.push(divs[i]);
}
len = result.length;
i = 0;
for (; i < len; i++) {
aLink = document.createElement('a');
aLink.innerHTML = 'Edit';
aLink._parent = result[i]; // store a reference to the parent div
aLink.href = '#';
aLink.onclick = function(ev) {
ev.preventDefault();
// do your edit stuff here, ev.target._parent contain the targetted div
};
result[i].appendChild(aLink);
}
$('div.my-class').each( function( index, element ){
var div = $( element ); // not sure if this is needed
// add the buttons, e.g. via div.html('');
// add the buttons' click handlers
});