Member Avatar for abby.arnett.12

Hi my name is Abby, I need some major help. Its spring break and before we left class our teacher gave us a cruel assigment. I need to create 1 btn that makes a div - I need 1 brn that creates text using prompts - I need 1 btn that changes a div element, and I need one button that changes text. I have been working on this for 15hrs and still can't get. I want to enjoy my spring break. Please Help?

  • 4 Contributors
  • 3 Replies
  • 311 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Member #905211

Dani AI

Generated

A compact, self-contained vanilla JavaScript example that implements the four buttons requested by is below. It avoids inline event attributes, uses event listeners, and keeps user input as text (not HTML). 's suggestion to experiment with tutorials is useful; 's jQuery question is addressed in the final note. This can be saved as a single HTML file and opened in a browser.

<button id="btnCreateDiv">Create div</button>
<button id="btnPromptText">Add text from prompt</button>
<button id="btnModifyDiv">Modify sample div</button>
<button id="btnChangeText">Change sample text</button>

<div id="output" style="margin-top:10px"></div>

<div id="sampleDiv" style="margin-top:10px;padding:8px;border:1px solid #ccc;">
  Sample div
</div>

<p id="sampleText">Sample text</p>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var out = document.getElementById('output');
  var sampleDiv = document.getElementById('sampleDiv');
  var sampleText = document.getElementById('sampleText');

  document.getElementById('btnCreateDiv').addEventListener('click', function () {
    var d = document.createElement('div');
    d.textContent = 'New div created at ' + new Date().toLocaleTimeString();
    d.style.border = '1px dashed #999';
    d.style.padding = '6px';
    out.appendChild(d);
  });

  document.getElementById('btnPromptText').addEventListener('click', function () {
    var t = prompt('Enter text to add:');
    if (t !== null && t.trim() !== '') {
      var p = document.createElement('p');
      p.textContent = t;
      out.appendChild(p);
    }
  });

  document.getElementById('btnModifyDiv').addEventListener('click', function () {
    if (sampleDiv) {
      sampleDiv.style.background = '#f0f8ff';
      sampleDiv.textContent = 'Div changed at ' + new Date().toLocaleTimeString();
    }
  });

  document.getElementById('btnChangeText').addEventListener('click', function () {
    var newText = prompt('Replace sample text:', sampleText.textContent);
    if (newText !== null) sampleText.textContent = newText;
  });
});
</script>

Troubleshooting notes: place the script after the elements or use DOMContentLoaded (example does); open the browser console (F12) to see errors; make sure element IDs match exactly; check that prompt can return null when canceled; prefer textContent over innerHTML to avoid injecting HTML/XSS. If generated elements need later interaction, add classes or data-attributes and use event delegation.

About jQuery and homework: if the assignment allows a library, jQuery shortens selectors and event binding, but plain JavaScript shows the underlying concepts teachers usually want. is right that doing the work matters—this example is intended as a learning scaffold, not a finished submission.

Recommended Answers

All 3 Replies

Member Avatar for AffineMesh

Hi Abby

As a starting point, here's a simple JavaScript example on W3Schools that you might find useful...
http://www.w3schools.com/js/default.asp

The 'Try it yourself' feature on this page will enable you to play around with the code. You'll need to adapt the code to fit your assignment.

Do try experimenting with it. If you get stuck, post some code back here and we may be able to help further.

Member Avatar for lambing

Is there a requirement whether you could use a framework like jQuery or just the native one?

Member Avatar for Member #905211

Sorry, but asking for help on homework assignments is not supposed to be allowed on the forums. If you actually want to be a developer, do the work, put in the time, or don't bother and get into something else.

If you show examples of your work and where you are stuck, I'd be more than happy to guide you. However, I'm not about to do your homework for you, unless of course you feel like paying me ;)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.