Coming soon - Get a detailed view of why an account is flagged as spam!
view details

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 3 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: 9 hours 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