Блог

Главная - Вопросы по программированию - использование textContent для изменения / добавления записи в моем html-файле

использование textContent для изменения / добавления записи в моем html-файле

#javascript #html

#javascript #HTML

Вопрос:

Я изо всех сил пытаюсь понять, что я делаю неправильно и почему то, что я сделал, не работает .. если бы кто-нибудь мог предоставить правильный код и объяснение, это было бы здорово.

В принципе, мне нужно, чтобы при нажатии кнопки и заполнении имени появлялась дополнительная строка с надписью «молодец, ты выполнил задачу 1», но я не могу добиться этого и перепробовал несколько способов.он должен быть там, где находится в HTML-файле.

HTML

     <h1> Input and Output using Javascript</h1>
    <p id="message"> THis is some text in a paragraph </p>

    <p><span id="newmessage"></span></p>
    <p><button type="button" id="clickme">Click Me!</button></p>

JavaScript

     function promptName() {

    var sName = prompt("Enter your name.nThis prompt should show uo when 
    thenClick Me busson is clicked.","your Name");

    alert(" Hi there "   sName  ". Alert boxes are a quick way to check the 
    staten of your variabled when you are developing code.");

    rewriteParagraph(sName);
    }

    function rewriteParagraph(userName){
    var message = document.getElementById("message");

    message.innerHTML = "hi "   userName   "If you can see this you have 
    successfully overwritten the contents of this paragraph. 
    Congratulations!!";
    }

    function writeNewMessage(){

    var newMessage = document.getElementById("clickme");
    document.getElementById("newmessage").innerHTML = "you have now 
    finished Task 1";}

   function init() {
   var clickMe = document.getElementById("clickme");
   clickMe.onclick = promptName;


  }

   window.onload = init;

Ответ №1:

Ну writeNewMessage , нигде не вызывался, поэтому не уверен, что это делает, но все остальное, похоже, работает:

 function promptName() {
    var sName = prompt("Enter your name.nThis prompt should show when thenClick Me button is clicked.","your name");

    alert("Hi there "   sName  ". Alert boxes are a quick way to check the staten of your variables when you are developing code.");

    rewriteParagraph(sName);
    writeNewMessage();
}

function rewriteParagraph(userName) {
    var message = document.getElementById("message");

    message.innerHTML = "Hi "   userName   ". If you can see this you have successfully overwritten the contents of this paragraph. Congratulations!!";
}

function writeNewMessage() {    
    document.getElementById("newmessage").innerHTML = "you have now finished Task 1";
}

function init() {
    var clickMe = document.getElementById("clickme");
    clickMe.onclick = promptName;
}

window.onload = init;  
 <h1> Input and Output using Javascript</h1>
<p id="message"> This is some text in a paragraph </p>

<p><span id="newmessage"></span></p>
<p><button type="button" id="clickme">Click Me!</button></p>

Ответ №2:

Во-первых, вам нужно исправить опечатки. Затем вам нужно вызвать функцию: writeNewMessage();

Обратите внимание, что вы можете удалить var newMessage = document.getElementById("clickme"); , поскольку он ничего не делал.

 function promptName() {

  var sName = prompt("Enter your name.nThis prompt should show up when thenClick Me button is clicked.", "your Name");

  alert(" Hi there "   sName   ". Alert boxes are a quick way to check the staten of your variabled when you are developing code.");
  rewriteParagraph(sName);
}

function rewriteParagraph(userName) {
  var message = document.getElementById("message");

  message.innerHTML = "Hi "   userName   "! If you can see this you have successfully overwritten the contents of this paragraph. Congratulations!!";
  writeNewMessage(); // < need to be called
}

function writeNewMessage() {
  // var newMessage = document.getElementById("clickme"); // < useless
  document.getElementById("newmessage").innerHTML = "you have now finished Task 1 ";
}

function init() {
  var clickMe = document.getElementById("clickme");
  clickMe.onclick = promptName;
}

window.onload = init;  
 <h1> Input and Output using Javascript</h1>
<p id="message"> This is some text in a paragraph </p>

<p><span id="newmessage"></span></p>
<p><button type="button" id="clickme">Click Me!</button></p>