This post has been de-listed
It is no longer included in search results and normal feeds (front page, hot posts, subreddit posts, etc). It remains visible only via the author's post history.
1
One textbox is working, but the other is not. How come?
Post Flair (click to view more posts with a particular flair)
Post Body
I am having problems with the code below. The main issue is that when a user hits the "reply" button, the text box appears at the bottom of the page. (That's not the problem here). When a user types in the text box, and swipes the button, the text typed in the text box by the user isn't being recognized by the code. That is the problem, why isn't the user's text in the box being processed? Now, the textbox at the top works like a charm. It is the bottom textbox that the text isn't being processed. I've listed the problematic code at the top. Please help me fix the issue. Thank you.
The full source code is at the bottom. Thank you.
// create a new textbox element
const textBox = document.createElement('textarea');
// set the value of the textbox to the address
textBox.value = address;
// add the textbox to the body of the HTML document
document.body.appendChild(textBox);
// create money button
const mbDiv = document.createElement('div');
mbDiv.id = 'mb';
document.body.appendChild(mbDiv);
// create input box for money button message
const inputBox = document.createElement('input');
inputBox.type = 'text';
inputBox.id = 'txt';
inputBox.style.width = '300px';
inputBox.style.height = '50px';
inputBox.onkeyup = render;
document.body.appendChild(inputBox);
// render money button
function render() {
const div = document.getElementById('mb');
const text = document.getElementById('txt').value;
const script = bsv.Script.buildSafeDataOut(['19HxigV4QyBv3tHpQVcUEQyq1pzZVdoAut', text, 'text/plain']).toASM();
moneyButton.render(div, {
onPayment: animateCoin,
outputs: [
{
script: script,
amount: '0.00001',
currency: 'USD',
},
{
address: '1EuZrEH2uTPKXUAusrE58nNekQGfRKgrw9',
amount: '0.002',
currency: 'USD'
},
{
address: address,
amount: '0.002',
currency: 'USD'
}
]
Full Source:
<!DOCTYPE html>
<html>
<head>
<title>New World Address (DEMO)</title>
<style>
.coin {
width: 50px;
height: 50px;
background-color: gold;
border-radius: 50%;
position: relative;
top: 0;
left: 0;
transition: top 1s, left 1s;
}
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #f1f1f1;
padding: 10px;
z-index: 999;
}
body {
margin-top: 60px; /* To prevent content from being hidden behind the fixed header */
}
</style>
</head>
<body>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
border-radius: 5px;
}
li {
padding: 14px 16px;
background-color: #f1f1f1;
}
li:nth-child(even) {
background-color: #ddd;
}
li a {
display: block;
color: #333;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
.active {
background-color: #4CAF50;
color: white;
}
.btn-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
text-align: center;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #3e8e41;
}
</style>
<h1 class="fixed-header">new/Advertisements </h1>
<iframe width="300" height="315" src="https://www.youtube.com/embed/-rpEgQT54ns" frameborder="0" allowfullscreen></iframe> Leave A Comment
<input type="text" id="txt" style="width: 300px; height: 50px;" onkeyup="render()">
<div id="my-button">
<div class="coin"></div>
</div>
<script>
function animateCoin() {
// Store the initial position of the coin
var initialX = 0;
var initialY = 0;
var coin = document.querySelector('.coin');
// Get the current position of the coin
var currentPosition = coin.getBoundingClientRect();
// If it's the first animation, store the initial position
if (initialX === 0 && initialY === 0) {
initialX = currentPosition.left;
initialY = currentPosition.top;
}
var stepSize = 10; // Adjust the step size as desired
var newY;
// Check if the coin is at the bottom edge or near it
if (currentPosition.top currentPosition.height >= window.innerHeight) {
newY = currentPosition.top - stepSize; // Move up
} else {
newY = currentPosition.top stepSize; // Move down
}
// Animate the coin to the new position
coin.style.top = newY 'px';
// Check if the coin reached the top or bottom edge
if (newY <= 0 || newY currentPosition.height >= window.innerHeight) {
coin.remove(); // Remove the coin element from the DOM
return; // Exit the function
}
// Play the jingling sound
var jinglingSound = document.getElementById('jingling-sound');
jinglingSound.currentTime = 0; // Reset the audio to start playing from the beginning
jinglingSound.play();
console.log('A payment has occurred!', payment);
// Clear any existing timeout and set a new one to reset the coin position after 2 seconds
clearTimeout(resetTimeout);
resetTimeout = setTimeout(resetCoinPosition, 2000);
}
function resetCoinPosition() {
var coin = document.querySelector('.coin');
coin.style.top = '0';
coin.style.left = '0';
}
// After 2 seconds, remove the coin from the DOM
setTimeout(function() {
coin.remove();
}, 2000);
const render = () => {
const div = document.getElementById('my-button');
const text = document.getElementById('txt').value;
const script = bsv.Script.buildSafeDataOut(['19HxigV4QyBv3tHpQVcUEQyq1pzZVdoAut', text, 'text/plain']).toASM();
const outputs = [{
script,
amount: '0.00001',
currency: 'USD',
onPayment: animateCoin
}, {
address: '1EuZrEH2uTPKXUAusrE58nNekQGfRKgrw9',
amount: '0.002',
currency: 'USD'
}];
moneyButton.render(div, { outputs, onPayment: animateCoin });
}
</script>
<ul id="txhash-list">
</ul>
<div class="btn-container">
<a href="#" class="btn">View More Comments/Post</a>
</div>
<script src="https://unpkg.com/[email protected]/bsv.min.js"></script>
<script src="https://www.moneybutton.com/moneybutton.js"></script>
<script>
// Function to get the last Bitcoin address from a transaction
async function getLastAddress(txHash) {
const response = await fetch(`https://api.whatsonchain.com/v1/bsv/main/tx/hash/${txHash}`);
const data = await response.json();
const lastOutput = data.vout[data.vout.length - 1];
return lastOutput.scriptPubKey.addresses[0];
}
// Function to display the address in a text box
function createTextBox(address) {
// create a new textbox element
const textBox = document.createElement('textarea');
// set the value of the textbox to the address
textBox.value = address;
// add the textbox to the body of the HTML document
document.body.appendChild(textBox);
// create money button
const mbDiv = document.createElement('div');
mbDiv.id = 'mb';
document.body.appendChild(mbDiv);
// create input box for money button message
const inputBox = document.createElement('input');
inputBox.type = 'text';
inputBox.id = 'txt';
inputBox.style.width = '300px';
inputBox.style.height = '50px';
inputBox.onkeyup = render;
document.body.appendChild(inputBox);
// render money button
function render() {
const div = document.getElementById('mb');
const text = document.getElementById('txt').value;
const script = bsv.Script.buildSafeDataOut(['19HxigV4QyBv3tHpQVcUEQyq1pzZVdoAut', text, 'text/plain']).toASM();
moneyButton.render(div, {
onPayment: animateCoin,
outputs: [
{
script: script,
amount: '0.00001',
currency: 'USD',
},
{
address: '1EuZrEH2uTPKXUAusrE58nNekQGfRKgrw9',
amount: '0.002',
currency: 'USD'
},
{
address: address,
amount: '0.002',
currency: 'USD'
}
]
});
}
}
// Fetch the data from the API
fetch('https://api.whatsonchain.com/v1/bsv/main/address/1EuZrEH2uTPKXUAusrE58nNekQGfRKgrw9/history')
.then(response => response.json())
.then(data => {
// Get the last 10 transactions
const last10Txs = data.slice(-100).reverse();
// Print out the last 10 transactions, append to the API endpoint, and get the last address
for (let i = 0; i < last10Txs.length; i ) {
const tx = last10Txs[i];
const li = document.createElement('li');
const a = document.createElement('a');
a.href = `https://api.whatsonchain.com/v1/bsv/main/tx/hash/${tx.tx_hash}`;
a.textContent = `TX ID: ${tx.tx_hash.substring(0, 4)}...${tx.tx_hash.substring(tx.tx_hash.length - 4)}`;
a.target = '_blank';
li.appendChild(a);
document.getElementById('txhash-list').appendChild(li);
// Create "Reply" button with onclick handler
const replyButton = document.createElement('button');
replyButton.textContent = 'Reply';
// Apply float: right; CSS rule to the button
replyButton.style.float = 'right';
replyButton.onclick = async () => {
const address = await getLastAddress(tx.tx_hash);
createTextBox(address);
};
li.appendChild(replyButton);
fetch(`https://bico.media/${tx.tx_hash}`)
.then(response => {
if (!response.ok) {
throw new Error('No response from bico.media');
}
return response.text();
})
.then(text => {
const textSpan = document.createElement('span');
textSpan.style.fontWeight = 'bold';
textSpan.style.fontSize = 'larger';
textSpan.style.color = 'red';
// Check if text contains an image link
const imageRegex = /(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|gif|png)/g;
const matches = text.match(imageRegex);
if (matches) {
let prevIndex = 0;
matches.forEach(match => {
// Append the text before the image link
if (prevIndex < text.indexOf(match)) {
const prevText = text.substring(prevIndex, text.indexOf(match));
textSpan.appendChild(document.createTextNode(prevText));
}
// Create and append the image element
const img = document.createElement('img');
img.src = match;
textSpan.appendChild(img);
// Update the previous index
prevIndex = text.indexOf(match) match.length;
});
// Append any remaining text after the last image link
if (prevIndex < text.length) {
const remainingText = text.substring(prevIndex);
textSpan.appendChild(document.createTextNode(remainingText));
}
} else {
// No image links found, check for YouTube video links
const youtubeRegex = /(http(s?):)([/|.|\w|\s|-])*\.(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w|-] )/g;
const youtubeMatches = text.match(youtubeRegex);
if (youtubeMatches) {
let prevIndex = 0;
youtubeMatches.forEach(match => {
// Append the text before the YouTube video link
if (prevIndex < text.indexOf(match)) {
const prevText = text.substring(prevIndex, text.indexOf(match));
textSpan.appendChild(document.createTextNode(prevText));
}
// Create and append the iframe element
const videoId = match.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w|-] )/)[1];
const iframe = document.createElement('iframe');
iframe.src = `https://www.youtube.com/embed/${videoId}`;
iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
iframe.allowFullscreen = true;
iframe.frameborder = '0';
iframe.width = '560';
iframe.height = '315';
textSpan.appendChild(iframe);
// Update the previous index
prevIndex = text.indexOf(match) match.length;
});
// Append any remaining text after the last YouTube video link
if (prevIndex < text.length) {
const remainingText = text.substring(prevIndex);
textSpan.appendChild(document.createTextNode(remainingText));
}
} else {
// No image or YouTube video links found, use regular text content
textSpan.textContent = text;
}
}
li.appendChild(textSpan);
})
.catch(error => {
const textSpan = document.createElement('span');
textSpan.textContent = '(no comment found)';
li.appendChild(textSpan);
console.error(error);
});
getLastAddress(tx.tx_hash).then(address => {
const addressSpan = document.createElement('span');
addressSpan.textContent = `posted by: ${address}`;
const br = document.createElement('br');
li.appendChild(br);
li.appendChild(addressSpan);
});
}
})
.catch(error => console.error(error));
</script>
</body>
</html>
Author
User Suspended
Account Strength
0%
Suspended 2 months ago
Account Age
1 year
Verified Email
Yes
Verified Flair
No
Total Karma
8
Link Karma
5,901
Comment Karma
1,059
Profile updated: 4 days ago
Posts updated: 1 year ago
Subreddit
Post Details
We try to extract some basic information from the post title. This is not
always successful or accurate, please use your best judgement and compare
these values to the post title and body for confirmation.
- Posted
- 1 year ago
- Reddit URL
- View post on reddit.com
- External URL
- reddit.com/r/CodingHelp/...