I am attempting to have a button with a search value for our most common searches. What I was trying to do is user clicks button and inserts the text WITH the quotes "Some Text".
Right now this is what I am using for a single button. How would I make this so I can use one script with multiple buttons?
<button onclick="searchText()" data-product-name="iPhone 12 Pro">iPhone 12 Pro Max</button> <----Current Button
<button onclick="searchText()" data-product-name="Pixel 5">Pixel</button> <---- Added for what Id like
<button onclick="searchText()" data-product-name="LG">LG</button><---- Added for what Id like
<button onclick="searchText()" data-product-name="Samsung S20 Plus">Samsung S20 Plus</button><---- Added for what Id like
<script>
var i = 0;
var txt = '"iPhone 12 Pro Max"';
var speed = 50;
function searchText() {
if (i < txt.length) {
document.getElementById("search-query").value += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
</script>
I tried adding the following but did not work.
var txt = element.getAttribute('data-product-name');
var i = 0;
var txt = '"iPhone 12 Pro Max"';
var speed = 50;
var elements = document.querySelectorAll('button')
for (let i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', function() {
var txt = this.getAttribute('data-product-name');
console.log(txt);
});
}
<button data-product-name="iPhone 12 Pro">iPhone 12 Pro Max</button>
<button data-product-name="Pixel 5">Pixel</button>
<button data-product-name="LG">LG</button>
<button data-product-name="Samsung S20 Plus">Samsung S20 Plus</button>
You can pass the id of the button to the searchText.
and read the text using jquery or plain js
<!--html --->
<button onclick="searchText('buttonOne')" id= "buttonOne" data-product-name="Samsung S20 Plus">Samsung S20 Plus</button><---- Added for what Id like
// javascript
function(buttonId){
var text = document.getElementById(buttonId).innerHTML
// process the text with your business logic here
}
Related
So I'm trying to add a prompt which asks the user what they would like to add to an array. However, whenever I refresh the page, it gets deleted like it is only in local storage. I would like to add this to the actual code so it gets displayed permanently within the page.
Here is the relavent code:
<html>
<body>
<div class="ann" id="shadowbox">
<h4>Latest Announcements</h4>
<ul id="myUl"></ul>
</div>
<button onclick="fc()">populate</button>
<script>
var announcements = ["test",]
for (i = 0; i < announcements.length; i++) {
var li = document.createElement("li");
var text = document.createTextNode(announcements[i]);
li.appendChild(text);
document.getElementById("myUl").appendChild(li);
}
function fc() {
var asdkz = prompt("What would you like to add?")
announcements.push(asdkz);
}
</script>
You need to use localStorage to save the content of the array after refresh. Here is the solution with some modification:
<html>
<body>
<div class="ann" id="shadowbox">
<h4>Latest Announcements</h4>
<ul id="myUl"></ul>
</div>
<button onclick="fc()">populate</button>
<script>
var announcements = (localStorage.getItem("list")) ? localStorage.getItem("list").split(",") : ["test"]
updateList();
function updateList(){
document.getElementById("myUl").innerHTML = "";
for (i = 0; i < announcements.length; i++) {
var li = document.createElement("li");
var text = document.createTextNode(announcements[i]);
li.appendChild(text);
document.getElementById("myUl").appendChild(li);
}
}
function fc() {
var asdkz = prompt("What would you like to add?")
announcements.push(asdkz);
localStorage.setItem("list",announcements);
updateList();
}
</script>
I am fairly new to JavaScript,
I have ben working on a simple if else script to change the color of at button, depending on the status of a variable that I get from a plc (Siemens S7-1200).
The script is working fine and the color of the button is changing.
But I have 10 buttons that I want to run this script on.
Is it possible to “reuse” the script so that I don’t have to copy the script and change the variables for every button
T
<script>
var tag = ':="web_DB".outtag1:'
var button = "button1"
window.onload = function() {
if (tag == 1) {
document.getElementById(button).style.backgroundColor = 'green';
} else{
document.getElementById(button).style.backgroundColor = 'red';
}
}
</script>
<form>
<input type="submit" id="button1" value="button">
<input type="hidden" name='"web_DB".intag1' value ="1">
</form>
It's hard to be sure since you haven't posted all your code and what you have posted doesn't actually work but I think you're looking for something like this.
const tags = [
':="web_DB".outtag1:',
':="web_DB".outtag2:',
//...
':="web_DB".outtag10:'
];
window.onload = function() {
for (let i = 0; i <= 9; i++) {
const color = (tags[i] == 1) ? 'green' : 'red';
document.getElementById('button' + (i+1)).style.backgroundColor = color;
}
}
hi i'm trying to make a simple progrma that shows how many times a button is clicked on. I'm trying to learn to use namespaces. My problem is that then i click on the button the number that is displayed is just undefined.
var $S = {};
$S.antalClick = 0;
$S.click = function() {
$S.antalClick = +1;
document.getElementById("visa").innerHTML = $S.antalCLick;
}
<input type="button" value="click me" onClick=$S.click() /> <br/>
<div id="visa"></div>
There is an error in your $S.click function, replace
$S.antalClick = +1; by $S.antalClick += 1;
this is a shortcut to mean $S.antalClick = $S.antalClick + 1
You could shorten the previous answer further with $S.antalClick++;. The ++ signifies increasing a value by 1.
Use $S.antalClick++;:
var $S = {};
$S.antalClick = 0;
$S.click = function() {
document.getElementById( 'visa' ).innerHTML = $S.antalClick++;
}
<input type="button" value="click me" onClick=$S.click() />
<div id="visa"></div>
I'm trying to build a program to run a function every time I press a button, and output the returned value. To do this, I use the following HTML:
<h2>Test Results:</h2>
<strong><span id='runs'>0</span> tests</strong><br>
<div id='testResults'>
<button id='test' onClick='this.parentNode.innerHTML = initiatePlanB()'>Begin</button>
</div>
Here's the javascript:
var tests = document.getElementById('runs');
var inner = document.getElementById('testResults').innerHTML;
//Here's the part I can't figure out
var wo = inner.replace(??????, '');
var out = wo + '<br><strong>Test #' + String(Number(tests.innerText) + 1) + '</strong><br>';
tests.innerText = Number(tests.innerText) + 1;
//More stuff here
return out;
Basically, I need either a regex expression, or some other function that can remove any html tag and it's contents.
Why not just find all buttons using getElementsByTagName('button')
and then remove them all?
var testCount = 0;
var tests = document.getElementById('runs');
var inner = document.getElementById('testResults')
function initiatePlanB() {
var buttons = inner.getElementsByTagName('button');
if (buttons) {
for (var i = 0; i < buttons.length; i++) {
buttons[i].remove();
}
}
testCount++;
inner.insertAdjacentHTML('beforeend', '<br><strong>Test #' + testCount + '</strong><br>');
tests.innerText = testCount;
//More stuff here
}
<h2>Test Results:</h2>
<strong><span id='runs'>0</span> tests</strong><br>
<div id='testResults'>
<button id='test' onClick='initiatePlanB()'>Begin</button>
</div>
Though you should probably just hide the buttons, or disable them.
I managed to save the text that is in the input field but the problem is that i do not know how to save the button. The buttons turn white when i click on them and the price of that seat will be visible in the input field. The price saves but the button does not stay white.
<script>
function changeBlue(element) {
var backgroundColor = element.style.background;
if (backgroundColor == "white") {
element.style.background = "blue";
add(-7.5)
} else {
element.style.background = "white";
add(7.5)
}
}
function add(val) {
var counter = document.getElementById('testInput').value;
var b = parseFloat(counter,10) + val;
if (b < 0) {
b = 0;
}
document.getElementById('testInput').value = b;
return b;
}
function save(){
var fieldValue = document.getElementById("testInput").value;
localStorage.setItem("text", fieldValue)
var buttonStorage = document.getElementsByClass("blauw").value;
localStorage.setItem("button", buttonStorage)
}
function load(){
var storedValue = localStorage.getItem("text");
if(storedValue){
document.getElementById("testInput").value = storedValue;
}
var storedButton = localStorage.getItem("button");
if(storedButton){
document.getElementsByClass("blauw").value = storedButton;
}
}
</script>
<body onload="load()">
<input type="text" id="testInput"/>
<input type="button" id="testButton" value="Save" onclick="save()"/>
<input class="blauw" type="button" id="testButton2" value="click me to turn white"
style="background-color:blue" onclick="changeBlue(this)">
<input class="blauw" type="button" id="testButton2" value="click me to turn white"style="background-color:blue" onclick="changeBlue(this)">
</body>
i made a small sample of what i want to do. And i do not want to use the Id's of the buttons because i have like 500 of them in a table.
That's because getElementsByClass (it's getElementsByClassName btw) returns a node list of all the elements with that class.
To make it work, you need to go through all the items in the list, using a for-loop, and set the value of each individual element to the localStorage-value.
See these links for more information:
Link 1
Link 2
Very small mockup to give you an idea:
(In the JS, I put in comments the lines of code you would be using for your situation.)
function changeValues() {
var list = document.getElementsByClassName("child"); //var list = document.getElementsByClassName("blauw");
for (var i=0; i<list.length; i++) {
list[i].innerHTML = "Milk"; //list[i].value = storedButton;
}
}
<ul class="example">
<li class="child">Coffee</li>
<li class="child">Tea</li>
</ul>
<p>Click the button to change the text of the first list item (index 0).</p>
<button onclick="changeValues()">Try it</button>