I want to know how to retain values clicked and get more with my keyboard to make a word as opposed to one single letter?
function f(i) {
document.getElementById('txt').value
= (document.getElementById(i).firstChild.nodeValue);
<td id='i1' onclick='f("i1");' class='big'>A</td>
<td id='i2' onclick='f("i2");' class='big'>B</td>
<td id='i3' onclick='f("i3");' class='big'>C</td>
<td id='i4' onclick='f("i4");' class='big'>D</td>
<td id='i5' onclick='f("i5");' class='big'>E</td>
<td id='i6' onclick='f("i6");' class='big'>F</td>
<td id='i7' onclick='f("i7");' class='big'>G</td>
<td id='i8' onclick='f("i8");' class='big'>H</td>
<td id='i9' onclick='f("i9");' class='big'>I</td>
<td align='center' bgcolor='red' colspan=3> <input type='text' id='txt'></td>
You probably want to change the = for += to append the pressed value, instead of just replacing it.
Related
I want to make a dropdown list using insertAdjacentHTML, but there is a problem with determining where to insert a variable. When you click on any of the buttons, the value is inserted into the first row, although you need to make sure that it is inserted into the selected row
function walletRowTemplate(adress, passPhrase, maticBalance, avaxBalance, trxBalance, ftmBalance, bnbBalance, ethBalance, usdBalance) {
return `<tr id="ETH_${adress}" class="walletTableRow">
<td class="wallet_num"></td>
<td class="wallet_phrase">
<span>${passPhrase}</span>
<button onclick="copyToClipboard('${passPhrase}')"title="Копировать"><img src="public/icons/copy.png"></button>
</td>
<td class="wallet_MATIC_balance">${maticBalance}</td>
<td class="wallet_AVAX_balance">${avaxBalance}</td>
<td class="wallet_TRX_balance">${trxBalance}</td>
<td class="wallet_SOL_balance">0</td>
<td class="wallet_FTM_balance">${ftmBalance}</td>
<td class="wallet_BNB_balance">${bnbBalance}</td>
<td class="wallet_ETH_balance">${ethBalance}</td>
<td class="wallet_USD_balance">${usdBalance}$</td>
<td class="wallet_actions">
<button onclick="updateWalletBalance('${adress}')"><img src="public/icons/magnifier.png"></button>
</td>
</tr>`
}
function copyToClipboard(passPhrase) {
query('#walletListTable tr .wallet_phrase').insertAdjacentHTML('beforeend', `<li>${passPhrase}</li>`)
}
enter image description here
If I have this:
<td name="id1">First</td> <button>btn1</button>
<td name="id2">Second</td> <button>btn2</button>
<td name="id3">Third</td> <button>btn3</button>
<td name="id4">Fourth</td> <button>btn4</button>
I want if I click (btn1) the form send to my controller and then I can have (id2)
the ids generated by database so I don't know what is the number, how can I get the number by clicking the same side button?
Instead of using name, use ID
<td id="id1">First</td> <button>btn1</button>
<td id="id2">Second</td> <button>btn2</button>
<td id="id3">Third</td> <button>btn3</button>
<td id="id4">Fourth</td> <button>btn4</button>
Then use JavaScript like so:
document.getElementById('id1').innerHTML; // this is the value
or
document.getElementById('id1').id; // this is the value
or
document.getElementById('id1').value; // this is the value
To make the button work:
<td id="id1">First</td> <button id='btn1' onclick="handleButton(this);">btn1</button>
<td id="id2">Second</td> <button id='btn2'onclick="handleButton(this);">btn2</button>
<td id="id3">Third</td> <button id='btn3'onclick="handleButton(this);">btn3</button>
<td id="id4">Fourth</td> <button id='btn4'onclick="handleButton(this);">btn4</button>
The JavaScript function:
function handleButton(obj) {
alert('You clicked: ' + obj.id);
}
could anyone help me on my code?
I try to make a sample code on the following action:
1. when the user click on the button, the "hello" will take cell 1 and cell 2 while the other cell 3 to 10 will remain.
2. When the user click on the button again, nothing happen.
I try to set a flag to false after the user click on it to let nothing happen if user click again; however, it doesn't work at all. The user can click until the first row's cells deleted just left "hello".
Any solution in javascript or JQuery? I try to search for static variable in javascript but seem impossible.
Thank you in advance.
var flag = false;
function clickhere(){
if(flag = true){
var cell = document.getElementById('a');
document.getElementById("row").deleteCell(1);
cell.setAttribute("colspan", 2);
cell.innerHTML = "hello";
flag=false;
}
}
<table border="1">
<tr id="row">
<td id="a">1</td>
<td id="b">2</td>
<td id="c">3</td>
<td id="d">4</td>
<td id="e">5</td>
</tr>
<tr>
<td id="f">6</td>
<td id="g">7</td>
<td id="h">8</td>
<td id="i">9</td>
<td id="j">10</td>
</tr>
</table>
<input type="button" value="Click" onclick="clickhere();"/>
You have a couple of opportunities to address. Firstly, your if is doing an assignment rather than a a comparison. Since your flag is a boolean we can use it directly. Secondly, your initial assignment and the one at the end of the function should probably be opposite.
Here is one way you might correct things.
var flag = false;
function clickhere(){
if(flag){ return; }
flag = true;
var cell = document.getElementById('a');
document.getElementById("row").deleteCell(1);
cell.setAttribute("colspan", 2);
cell.innerHTML = "hello";
}
<table border="1">
<tr id="row">
<td id="a">1</td>
<td id="b">2</td>
<td id="c">3</td>
<td id="d">4</td>
<td id="e">5</td>
</tr>
<tr>
<td id="f">6</td>
<td id="g">7</td>
<td id="h">8</td>
<td id="i">9</td>
<td id="j">10</td>
</tr>
</table>
<input type="button" value="Click" onclick="clickhere();" />
I have a situation here, I need to calculate tax on the basis of an input using JavaScript. Here is the code:
PHP CODE:
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value"><div id="subtotal">$0.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Tax(%)</td>
<td class="total-value"><textarea id="txp">0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Taxes</td>
<td class="total-value"><div id="tax">$0.00</div></td>
</tr>
JavaScript code:
function update_tax() {
var txc = $("txp").val() * $("#subtotal").val() / 100;
$("#tax").html(txc);
}
$("#txp").blur(update_tax);
But the function is not working. Can anyone please help me with why this is not working?
Change
<td class="total-value"><div id="subtotal">$0.00</div></td>
to :
<td class="total-value">$<span id="subtotal">0.00</span></td>
and your code to:
$(document).ready(function(){
function update_tax() {
var txc = parseFloat($("#txp").val()) * parseFloat($("#subtotal").text()) / 100;
$("#tax").html("$"+txc);
}
$("#txp").blur(update_tax);
});
Now the code starts executing when the page has fully loaded. I moved the $-sign from the div and changed the div to a span (inline). So $ and value appear on the same line.
In the multiplying function I used parseFloat to convert any string to a float. The content from the textarea can be retrieved using jQuery val() the content of the span using text(). Also in the function you used txp as a selector, which will refer to a node with the name txp. Updated it to #txp to select the element with id: txp.
The code below shows a rendered HTML (from Compiled ASP .Net code). I would not be able to make any changes to it including adding new attributes like ID.
I could still do something with Javascript but because there is no unique ID for the column, I could not replace the underscore text "____________" with some other text.
The plan is to replace the underscore in column 3 for each row with some other text. Is there a way to identify Column 3 with Javascript?
Thank you.
<table width='100%'>
<tr>
<td align="left" valign="top" class='clsReadOnly'>Row 1
</td>
<td align="left" valign="top" class='clsReadOnly'>
abc
</td>
<td align="left" valign="top" class='clsReadOnly'>
__________________________
</td>
</tr>
<tr>
<td align="left" valign="top" class='clsReadOnly'>Row 2
</td>
<td align="left" valign="top" class='clsReadOnly'>
def
</td>
<td align="left" valign="top" class='clsReadOnly'>
__________________________
</td>
</tr>
<tr>
<td align="left" valign="top" class='clsReadOnly'>Row 3
</td>
<td align="left" valign="top" class='clsReadOnly'>
ghi
</td>
<td align="left" valign="top" class='clsReadOnly'>
__________________________
</td>
</tr>
</table>
If this is the only table on the page, you can do it with jQuery:
$('table')
.children('tr')
.each(function() {
$(this).children('td:last').html('<p>A Paragraph of Text</p>');
});
It depends on what you are trying to accomplish. If this is how your table will always look, you could do the following:
var cells = document.getElementsByClassName('clsReadOnly');
cells[2].innerHTML = "Row1 Column3";
cells[5].innerHTML = "Row2 Column3";
cells[8].innerHTML = "Row3 Column3";
If you don't know how many columns you will start with, you would have to do this:
var rows = document.getElementsByTagName('tr');
for (var i=0; i<rows.length; i++) {
var cells = rows[i].getElementsByTagName('td');
cells[2].innerHTML = 'Row'+(i+1)+' Column3';
}
jQuery would make this much easier, as you can select by tag, by parent, etc. Of course, you can do all of this in plain JavaScript, but it takes a lot more work.
http://jsfiddle.net/bShZa/
getElementsByClassName() is HTML5 and is not currently supported in IE. Here is the jsfiddle for the solution http://jsfiddle.net/V38MF/2/ w/o jQuery needed
var myTable = document.getElements('td');
for(var i=0; i<myTable.length; i++){
if((i+1)%3 == 0)
console.log(myTable[i].innerHTML);
}