Javascript 从swal库中增加文本元素_Javascript_Html_Sweetalert

Javascript 从swal库中增加文本元素

javascript html

Javascript 从swal库中增加文本元素,javascript,html,sweetalert,Javascript,Html,Sweetalert,我试图通过增加Swal库中的“text”属性（即（text:'RICHTIG！））来记录在右侧可拖放文件中拖放的相应元素的数量。因为这是我对alert（'right！'）的替代；本质上，我想用它实现的是每次触发警报消息时增加警报消息并显示其分数。然而，我对编程还不熟悉，虽然我已经在代码中找到了具体的修改位置，但问题是我不知道如何从递增函数的if语句中的Swal很好地定义“text”属性 function startTimer(duration,display){ var timer = du

我试图通过增加Swal库中的“text”属性（即（text:'RICHTIG！））来记录在右侧可拖放文件中拖放的相应元素的数量。因为这是我对alert（'right！'）的替代；本质上，我想用它实现的是每次触发警报消息时增加警报消息并显示其分数。然而，我对编程还不熟悉，虽然我已经在代码中找到了具体的修改位置，但问题是我不知道如何从递增函数的if语句中的Swal很好地定义“text”属性

function startTimer(duration,display){
  var timer = duration,seconds;
  setInterval(function(){
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;
    if(--timer < 0){
      timer = duration-1;
      clearInterval(timer);
      alert('Erneuert Versuchen!')
    }
  }, 2000);
}

window.onload = function () {
   var thirtySeconds = 60 / 2,
      display = document.querySelector('#time');
   startTimer(thirtySeconds,display);
};

var makeUnselectable = function($target){
  $target
    .addClass('unselectable')
    .attr('unselectable,on')
    .attr('draggable','false')
    .on('dragstart', function(){return false;});
  $target
    .find('*')
    .attr('draggable','false')
    .attr('unselectable','on');
};

var dragged;

function allowDrop(event) {}
/* events fired on the draggable target */
function drag(event) {

}

document.addEventListener("dragstart", function(event) {
  // store a ref. on the dragged elem
  dragged = event.target;
  // make it half transparent
  event.target.style.opacity = 0.5;
}, false);

document.addEventListener("dragend", function(event) {
  // reset the transparency
  event.target.style.opacity = "";
}, false);

/* events fired on the drop targets */
document.addEventListener("dragover", function(event) {
  // prevent default to allow drop
  event.preventDefault();
}, false);

document.addEventListener("dragenter", function(event) {
  // highlight potential drop target when the draggable element enters it
  if (event.target.className == "dropzone") {
    event.target.style.background = "purple";
  }

}, false);

document.addEventListener("dragleave", function(event) {
  // reset background of potential drop target when the draggable element leaves it
  if (event.target.className == "dropzone") {
    event.target.style.background = "";
  }

  console.log('test');

}, false);

gameScore = document.getElementById('gameScore');

function drop(event) {
  
  // prevent default action (open as link for some elements)
  event.preventDefault();
  // move dragged elem to the selected drop target
  //check if the target is dropzone and dragged element have the required group value if yes allow append child else dont do anything just reset color and opacity
  debugger;
  if (event.target.className == "dropzone" && dragged.attributes.group.value == event.target.attributes.group.value) {
    event.target.style.background = "";
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
    //console.log('test');
    swal({
      text: 'RICHTIG!',
      timer: 2000,
      buttons: false,
    }).then(
      function increase() {
        if (text === 'RICHTIG!'){
          score = document.getElementById("kategorie").childNodes.length;
          gameScore.innerHTML = score; 
        }
      },
      //handling the promise rejection
      function (dismiss){
        if (dismiss === 'timer'){
          //console.log('I was closed by the timer')
        }
      }
    )
  } else {
    if (event.target.className == "dropzone") {
      event.target.style.background = "";
    }
    dragged.style.opacity = 0.5;
    //alert('please drop the item to section : '+dragged.attributes.group.value)
    swal({
      text: 'FALSCH!',
      timer: 2000,
      buttons: false,
    }).then(
      function () {},
      //handling the promise rejection
      function (dismiss){
        if (dismiss === 'timer'){
          //console.log('I was closed by the timer')
        }
      }
    )
  }
}

功能启动定时器（持续时间，显示）{
var定时器=持续时间，秒；
setInterval（函数（）{
分钟=parseInt（计时器/60,10）；
秒=parseInt（计时器%60,10）；
分钟=分钟<10？“0”+分钟：分钟；
秒=秒<10？“0”+秒：秒；
display.textContent=分钟+“：”+秒；
如果（--定时器<0）{
定时器=持续时间-1；
清除间隔（计时器）；
警报（'Ernuert Versuchen！'）
}
}, 2000);
}
window.onload=函数（）{
变量30秒=60/2，
display=document.querySelector（“#time”）；
起始计时器（30秒，显示）；
};
var makeUnselectable=函数（$target）{
美元目标
.addClass（“不可选择”）
.attr（'不可选择，打开'）
.attr（'draggable'，'false'））
.on（'dragstart'，function（）{return false；}）；
美元目标
.find（“*”）
.attr（'draggable'，'false'））
.attr（'unselectable'，'on'）；
};
var；
函数allowDrop（事件）{}
/*对可拖动目标激发的事件*/
函数拖动（事件）{
}
document.addEventListener（“dragstart”，函数（事件）{
//在拖动的元素上存储一个参考
拖动=event.target；
//让它半透明
event.target.style.opacity=0.5；
}，假）；
文件。添加事件列表器（“dragend”，函数（事件）{
//重置透明度
event.target.style.opacity=“”；
}，假）；
/*对投放目标发射的事件*/
文件。添加事件列表器（“dragover”，功能（事件）{
//防止默认值以允许删除
event.preventDefault（）；
}，假）；
文件.附录列表器（“绘图器”，功能（事件）{
//当可拖动元素进入时，突出显示潜在下降目标
if（event.target.className==“dropzone”）{
event.target.style.background=“紫色”；
}
}，假）；
文件。添加事件列表器（“dragleave”，函数（事件）{
//当可拖动元件离开时，重置潜在下降目标的背景
if（event.target.className==“dropzone”）{
event.target.style.background=“”；
}
console.log（'test'）；
}，假）；
gameScore=document.getElementById（'gameScore'）；
函数删除（事件）{
//防止默认操作（作为某些元素的链接打开）
event.preventDefault（）；
//将拖动的图元移动到选定的放置目标
//检查目标是否为dropzone，拖动的元素是否具有所需的组值如果是允许附加子元素否则不执行任何操作只需重置颜色和不透明度
调试器；
if（event.target.className==“dropzone”&&Drawed.attributes.group.value==event.target.attributes.group.value）{
event.target.style.background=“”；
拖动的.parentNode.removeChild（已拖动）；
event.target.appendChild（拖动）；
//console.log（'test'）；
游泳({
文本：“RICHTIG！”，
计时器：2000，
按钮：错误，
}).那么(
功能增加（）{
如果（文本=='RICHTIG！'）{
score=document.getElementById（“kategorie”）.childNodes.length；
gameScore.innerHTML=分数；
}
},
//拒绝承诺的处理
职能（解雇）{
如果（解除=='timer'）{
//console.log（'我被计时器关闭'）
}
}
)
}否则{
if（event.target.className==“dropzone”）{
event.target.style.background=“”；
}
Drawed.style.opacity=0.5；
//警报（'请将项目放到节：'+拖动的.attributes.group.value）
游泳({
文本：“法氏！”，
计时器：2000，
按钮：错误，
}).那么(
函数（）{}，
//拒绝承诺的处理
职能（解雇）{
如果（解除=='timer'）{
//console.log（'我被计时器关闭'）
}
}
)
}
}

HTML


米特拉乌弗雷夫特酒店
法尔希·梅赫海特
无知的多元化
贝斯特ätigungsfehler酒店
生存偏差
韦尔夫·巴尔基茨赫里斯蒂克
这是一个很好的例子
邓宁·克鲁格
威斯森河川
穆斯费勒
雷克坦兹
祖舍尔菲克特
Ausgleichueristik
极欲厌恶
阿尔贝特效应

因此我找到了一种从SWAL库中增加文本警报的方法。从而也登记了拖放正确答案的数量。下面是完整的javascript代码

  var score = 0;
  function startTimer(duration,display){
  var timer = duration,seconds;
  setInterval(function(){
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;
    if(--timer < 0){
      timer = duration-1;
      clearInterval(timer);
      alert('Erneuert Versuchen!')
    }
  }, 2000);
}

window.onload = function () {
   var thirtySeconds = 60 / 2,
      display = document.querySelector('#time');
   startTimer(thirtySeconds,display);
};

var makeUnselectable = function($target){
  $target
    .addClass('unselectable')
    .attr('unselectable,on')
    .attr('draggable','false')
    .on('dragstart', function(){return false;});
  $target
    .find('*')
    .attr('draggable','false')
    .attr('unselectable','on');
};

var dragged;

function allowDrop(event) {}
/* events fired on the draggable target */
function drag(event) {

}

document.addEventListener("dragstart", function(event) {
  // store a ref. on the dragged elem
  dragged = event.target;
  // make it half transparent
  event.target.style.opacity = 0.5;
}, false);

document.addEventListener("dragend", function(event) {
  // reset the transparency
  event.target.style.opacity = "";
}, false);

/* events fired on the drop targets */
document.addEventListener("dragover", function(event) {
  // prevent default to allow drop
  event.preventDefault();
}, false);

document.addEventListener("dragenter", function(event) {
  // highlight potential drop target when the draggable element enters it
  if (event.target.className == "dropzone") {
    event.target.style.background = "purple";
  }

}, false);

document.addEventListener("dragleave", function(event) {
  // reset background of potential drop target when the draggable element leaves it
  if (event.target.className == "dropzone") {
    event.target.style.background = "";
  }

  console.log('test');

}, false);

// gameScore = document.getElementById('gameScore');
gameScore = document.getElementById('score');


function drop(event) {
  
  // prevent default action (open as link for some elements)
  event.preventDefault();
  // move dragged elem to the selected drop target
  //check if the target is dropzone and dragged element have the required group value if yes allow append child else dont do anything just reset color and opacity
  debugger;
  if (event.target.className == "dropzone" && dragged.attributes.group.value == event.target.attributes.group.value) {
    event.target.style.background = "";
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
    // score hoch zaehlen:
    score ++;
    document.getElementById('score').innerHTML= score;
    //
    //console.log('test');
    swal({
      text: 'RICHTIG!',
      timer: 2000,
      buttons: false,
    }).then(
      function increase() {
        
      },
      //handling the promise rejection
      function (dismiss){
        if (dismiss === 'timer'){
          //console.log('I was closed by the timer')
        }
      }
    )
  } else {
    if (event.target.className == "dropzone") {
      event.target.style.background = "";
    }
    dragged.style.opacity = 0.5;
    //alert('please drop the item to section : '+dragged.attributes.group.value)
    swal({
      text: 'FALSCH!',
      timer: 2000,
      buttons: false,
    }).then(
      function () {},
      //handling the promise rejection
      function (dismiss){
        if (dismiss === 'timer'){
          //console.log('I was closed by the timer')
        }
      }
    )
  }
}

var得分=0；
功能启动计时器（持续时间、显示）{
var定时器=持续时间，秒；
setInterval（函数（）{
分钟=parseInt（计时器/60,10）；
秒=parseInt（计时器%60,10）；
分钟=分钟<10？“0”+分钟：分钟；
秒=秒<10？“0”+秒：秒；
display.textContent=分钟+“：”+秒；
如果（--定时器<0）{
定时器=持续时间-1；
清除间隔（计时器）；
警报（'Ernuert Versuchen！'）
}
}, 2000);
}
window.onload=函数（）{
变量30秒=60/2，
display=document.querySelector（“#time”）；
起始计时器（30秒，显示）；
};
var makeUnselectable=函数（$target）{
美元目标
.addClass（“不可选择”）
.attr（'不可选择，打开'）
.attr（'draggable'，'false'））
.on（'dragstart'，function（）{return false；}）；
美元目标
.find（“*”）
.attr（'draggable'，'false'））
.attr（'unselectable'，'on'）；
  var score = 0;
  function startTimer(duration,display){
  var timer = duration,seconds;
  setInterval(function(){
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;
    if(--timer < 0){
      timer = duration-1;
      clearInterval(timer);
      alert('Erneuert Versuchen!')
    }
  }, 2000);
}

window.onload = function () {
   var thirtySeconds = 60 / 2,
      display = document.querySelector('#time');
   startTimer(thirtySeconds,display);
};

var makeUnselectable = function($target){
  $target
    .addClass('unselectable')
    .attr('unselectable,on')
    .attr('draggable','false')
    .on('dragstart', function(){return false;});
  $target
    .find('*')
    .attr('draggable','false')
    .attr('unselectable','on');
};

var dragged;

function allowDrop(event) {}
/* events fired on the draggable target */
function drag(event) {

}

document.addEventListener("dragstart", function(event) {
  // store a ref. on the dragged elem
  dragged = event.target;
  // make it half transparent
  event.target.style.opacity = 0.5;
}, false);

document.addEventListener("dragend", function(event) {
  // reset the transparency
  event.target.style.opacity = "";
}, false);

/* events fired on the drop targets */
document.addEventListener("dragover", function(event) {
  // prevent default to allow drop
  event.preventDefault();
}, false);

document.addEventListener("dragenter", function(event) {
  // highlight potential drop target when the draggable element enters it
  if (event.target.className == "dropzone") {
    event.target.style.background = "purple";
  }

}, false);

document.addEventListener("dragleave", function(event) {
  // reset background of potential drop target when the draggable element leaves it
  if (event.target.className == "dropzone") {
    event.target.style.background = "";
  }

  console.log('test');

}, false);

// gameScore = document.getElementById('gameScore');
gameScore = document.getElementById('score');


function drop(event) {
  
  // prevent default action (open as link for some elements)
  event.preventDefault();
  // move dragged elem to the selected drop target
  //check if the target is dropzone and dragged element have the required group value if yes allow append child else dont do anything just reset color and opacity
  debugger;
  if (event.target.className == "dropzone" && dragged.attributes.group.value == event.target.attributes.group.value) {
    event.target.style.background = "";
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
    // score hoch zaehlen:
    score ++;
    document.getElementById('score').innerHTML= score;
    //
    //console.log('test');
    swal({
      text: 'RICHTIG!',
      timer: 2000,
      buttons: false,
    }).then(
      function increase() {
        
      },
      //handling the promise rejection
      function (dismiss){
        if (dismiss === 'timer'){
          //console.log('I was closed by the timer')
        }
      }
    )
  } else {
    if (event.target.className == "dropzone") {
      event.target.style.background = "";
    }
    dragged.style.opacity = 0.5;
    //alert('please drop the item to section : '+dragged.attributes.group.value)
    swal({
      text: 'FALSCH!',
      timer: 2000,
      buttons: false,
    }).then(
      function () {},
      //handling the promise rejection
      function (dismiss){
        if (dismiss === 'timer'){
          //console.log('I was closed by the timer')
        }
      }
    )
  }
}